复制html表格行并附加到其他表格中答案

【问题标题】：Copy html table row and append in other table复制html表格行并附加到其他表格中
【发布时间】：2017-07-23 23:46:46
【问题描述】：

我有两个表 [Source: table1, Destination:table2]，每个表有 3 列（复选框、value1、value2）。在选择 table1 中的复选框时，jquery 应该复制该特定行并将其附加到 table2，同时从 table1 中删除它。此操作也应该适用于从 table2 到 table1。我写了一个脚本，但它不起作用。它正在从 table1 复制和删除并附加到 table2 但是当我从新动态添加的 table2 行中选择一个复选框时，不知何故它没有附加到 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>

我错过了什么吗？我该如何解决这个问题？

【问题讨论】：

能否提供您的代码或示例代码

标签： jquery checkbox html-table

【解决方案1】：

使用实时点击

<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>

【讨论】：

live会应用到动态应用的对象上，click是bind的简写，好调用。

【解决方案2】：

让它更干净一点：

<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>

问题是处理程序是在 document.ready 上注册的，这意味着最初填充的表行将注册一个委托。当您将行移动到另一个表时，侦听器不再存在，因此您必须将侦听器附加到复选框本身（通过 css 类名称或标识符）

Jquery 绑定也可以解决问题。

【讨论】：

谢谢亚瑟。我将使用 Live。我可能会在其他地方尝试您的方法。不过还是谢谢。

【解决方案3】：

<%@ 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>

【讨论】：