html表值交换

我在html中创建了两个表.. 如何通过复选框选择行来将行从一个表移动到另一个表？任何人都可以给我一个示例JS来做到这一点。由于html表值交换

2012-04-19 Mark

你可以在这里给你的代码，所以我们也可以在代码 – 2012-04-19 07:32:19

试试这个：

<script type="text/javascript"> 
function moveIt() { 
    $('#table-1 input[type=checkbox]:checked').each(function() { 
    var tr = $(this).parents('tr').get(0); 
    $('#table-2').append($(tr)); 
    }); 
} 
</script> 

<table border="1" id="table-1"> 
    <tr> 
    <td><input type="checkbox"></td> 
    <td>First</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox"></td> 
    <td>Second</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox"></td> 
    <td>Third</td> 
    </tr> 
</table> 

<table border="1" id="table-2"> 
</table> 

<input type="button" onclick="moveIt()" value="move selected lines from table-1 to table-2" />

不要忘记，包括jQuery的。

来源

2012-04-19 07:48:50

谢谢..它运行平稳：D – Mark 2012-04-19 09:46:29

嗨，穆罕默德先生，如果我想添加表-1中的所有行而不检查所有选中的复选框，那该怎么办呢？它就像按钮全选？ – Mark 2012-04-20 02:30:29

然后你需要将$（'＃table-1 input [type = checkbox]：checked'）更改为$（'＃table-1 input [type = checkbox]'），所以它会匹配所有的复选框，仅限复选框 – 2012-04-20 09:57:15

这是一个TR的内容复制到另一个TR

see this fiddle

关键的一点是要获得的innerHTML并将其移动到所需的部分

来源

2012-04-19 07:38:42

回答你这很好，除非它不能在IE ... – Teemu 2012-04-19 08:37:44

简单的方法可以做到这一点使用jQuery。像这样的东西应该可以完成这项工作。

$(function() { 
    // Bind button 
    $('#moveRows').click(moveSelectedRows); 
    // Select All-button 
    $('#selectAll').click(function() { 
     $('#table1 input[type="checkbox"]').prop("checked", true); 
    }); 
}); 

function moveSelectedRows() { 
    $('#table1 input[type="checkbox"]:checked').each(function() { 
     // Remove from #table1 and append to #table2 
     $('#table2').append($(this).closest('tr').remove()); 
     // Remove the checkbox itself 
     $(this).remove(); 
    }); 
}

HTML

<a href="#" id="selectAll">Select All</a> 

<table id="table1"> 
    <tr> 
     <td>Foo1 <input type="checkbox" /></td> 
    </tr> 
    <tr> 
     <td>Bar2 <input type="checkbox" /></td> 
    </tr> 
</table> 

<table id="table2"> 
    <tr> 
     <th>Selected rows</th> 
    </tr> 
</table> 

<a id="moveRows" href="#">Move rows</a>

来源

2012-04-19 07:47:24 sshow

我会把事件？或者我怎么能调用jQuery函数？ – Mark 2012-04-19 09:41:24

@Mark单击按钮时，函数会自行调用。我会编辑更清晰。 – sshow 2012-04-19 09:53:22

感谢它，它的工作..只是我想知道的一件事。如何在不验证所有选中的复选框（例如全选）的情况下将table1上的所有数据转移到table2中？ – Mark 2012-04-20 02:33:22

html表值交换

回答

相关问题