I have two tables and two buttons(left button, right button) between those tables. rows in both tables can be selected and when selected can be copied between the two tables. for example in contact-names
table there are 3 names: zuki, xavi and pete; guest-list
table have no names. zuki and xavi are selected so when right button
is clicked those two names get appended into guest-list
table. so now that zuki and xavi are in that table say i changed my mind so i select zuki and click on left button
and it will prepend zuki into contact-names
table. now that zuki is prepended into contact-names
table there are 2 names : zuki and pete.
issue is say i selected pete and then i click on right button
, pete is appended AS WELL AS zuki but zuki was not selected. so with that glitch i have xavi,zuki and pete listed in guest-list
. another thing is if i move xavi to the other table then zuki will follow suit. please help me. tia
contact-names table:
<tbody>
<table class="contact-names">
<thead>
<tr>
<th>Contacts</th>
</tr>
</thead>
<tbody class="contact-list">
</tbody>
</table>
</tbody>
contact-list
is populated using jquery .load()
guest-list table :
<tbody>
<table class="guest-list">
<thead>
<tr>
<th>Guests</th>
</tr>
</thead>
<tbody class="guest-names">
</tbody>
</table>
</tbody>
the buttons:
<input type="button" value=">" class="move" id="moveright">
<input type="button" value="<" class="move" id="moveleft">
jquery:
$(".name-row").live('click', function() {
var row = $(this).css('background','Red');
$("#moveright").live('click', function(){
var table = $(".guest-names");
row.appendTo(table);
row.css('background', '');
row.removeClass("name-row");
row.addClass("row-name");
});
$(".row-name").live('click', function(){
var rows = $(this).css('background', 'Red');
$("#moveleft").live('click', function(){
var tables = $(".contact-list");
rows.prependTo(tables);
rows.css('background', '');
rows.removeClass("row-name");
});
});
});
".name-row"
refers to:
echo
"<tr class='name-row'>
<td><span style='font-size:14px'>$salute $fname $lname</span></td>
</tr>";