Copy html table row and append in other table
I 开发者_JAVA百科have two tables [Source: table1, Destination:table2] with 3 columns each (checkbox, value1, value2). On selecting a checkbox in table1, jquery should copy that particular row and append it to table2 while deleting it from table1 at the same time. This action should also work from table2 to table1. I wrote a script but its not working. It is copying and deleting from table1 and appending to table2 but when I select a checkbox from the newly dynamically added table2 row, somehow it is not getting appended to table1.
<script>
$(document).ready(function() {
$("#table1 tr input:checkbox").click(function() {
$('#table2').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
$(this).parent().parent().remove();
});
$("#table2 tr input:checkbox").click(function() {
$('#table1').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
$(this).parent().parent().remove();
});
});
</script>
Am I missing anything? How do I fix this thing?
use live insted of click
<script>
$(document).ready(function() {
$("#table1 tr input:checkbox").live('click',function() {
$('#table2').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
$(this).parent().parent().remove();
});
$("#table2 tr input:checkbox").live('click',function() {
$('#table1').append('<tr><td><input type="checkbox" name="'+$(this).attr("name")+'" value="'+$(this).val()+'"></td><td>'+$(this).attr("name")+'</td><td>'+$(this).val()+'</td></tr>');
$(this).parent().parent().remove();
});
});
</script>
Make it a little cleaner:
<script>
$(document).ready(function() {
$("#table1 tr input:checkbox").click(function() {
$('#table2').append($(this).parent('tr').clone());
$(this).parent('tr').remove();
});
$("#table2 tr input:checkbox").click(function() {
$('#table1').append($(this).parent('tr').clone());
$(this).parent('tr').remove();
});
});
</script>
And the problem is that the handlers are registered on document.ready, which means that the table rows populated initially will have a delegates registered. When you move the row to another table, the listener is not there anymore, hence you have to attach the listener to a checkbox itself (via css class name or identifier)
Jquery bind will do the trick as well.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#ti1").click(function(){
$(".ul1").slideToggle(300);
$(".ul2").hide();
$(".ul3").hide();
$(".ul4").hide();
});
$("#ti2").click(function(){
$(".ul2").slideToggle(300);
$(".ul1").hide();
$(".ul3").hide();
$(".ul4").hide();
});
$("#ti3").click(function(){
$(".ul3").slideToggle(300);
$(".ul1").hide();
$(".ul2").hide();
$(".ul4").hide();
});
$("#ti4").click(function(){
$(".ul4").slideToggle(300);
$(".ul1").hide();
$(".ul3").hide();
$(".ul2").hide();
});
});
</script>
<style type="text/css">
.lidesign{
border:1px solid black;
width:10%;
background-color:#F5F5F5;
border:1px solid #EEEEE0;
}
.ul1{
display:none;
border:1px solid #EEEEE0;
width:20%;
margin-top:0px;
}
.ul2{
display:none;
border:1px solid #EEEEE0;
width:20%;
margin-top:0px;
}
.ul3{
display:none;
border:1px solid #EEEEE0;
width:20%;
margin-top:0px;
}
.ul4{
display:none;
border:1px solid #EEEEE0;
width:20%;
margin-top:0px;
}
#ti1{
width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
}
#ti2{
width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
margin-top:0px;
position: relative;
}
#ti3{
width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
margin-top:0px;
}
#ti4{
width:20%;
height:25px;
cursor: pointer;
font-weight:bold;
margin-top:0px;
}
</style>
</head>
<body>
<div id="menu">
<div class="lidesign" id="ti1">Title1</div>
<div class="ul1">
<ul>
<li> 123</li>
<li> 456</li>
<li> 789</li>
<li> 789</li>
<li> 789</li>
<li> 789</li>
<li> 789</li>
</ul>
</div>
<div class="lidesign" id="ti2">Title2</div>
<div class="ul2">
<ul>
<li> abc</li>
<li> def</li>
<li> ghi</li>
<li> abc</li>
<li> def</li>
<li> ghi</li>
</ul>
</div>
<div class="lidesign" id="ti3">Title3</div>
<div class="ul3">
<ul>
<li> 123</li>
<li> 456</li>
<li> 789</li>
<li> 123</li>
<li> 456</li>
<li> 789</li>
</ul>
</div>
<div class="lidesign" id="ti4">Title4</div>
<div class="ul4">
<ul>
<li> abc</li>
<li> def</li>
<li> ghi</li>
</ul>
</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论