javascript实现同页面中table1的某一行/某几行移动到table2中 10
table1和table2是同一个页面的，且不要用jquery，开发的页面不支持这个。所以很麻烦，个人已不知如何实现了。...
table1和table2是同一个页面的，且不要用jquery，开发的页面不支持这个。所以很麻烦，个人已不知如何实现了。
展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>导航</title>
<style type="text/css">
table {
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
</style>
<script>
var move = function ()
{
var table1 = document.getElementById ("table1");
var table2 = document.getElementById ('table2');
var temp = [];
for ( var i = 0; i < table1.tBodies[0].rows.length; i++)
{
var ck = table1.tBodies[0].rows[i].cells[0].children[0];
if (ck.checked)
{
temp.push(table1.rows[i]);
}
}
var frag = document.createDocumentFragment ();
for ( var i = 0; i < temp.length; i++)
{
frag.appendChild(temp[i]);
}
table2.tBodies[0].appendChild(frag);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td><input type="checkbox" />
</td>
<td>1111</td>
</tr>
<tr>
<td><input type="checkbox" />
</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" />
</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" />
</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" />
</td>
<td>555</td>
</tr>
<tr>
<td><input type="checkbox" />
</td>
<td>666</td>
</tr>
</table>
<table id="table2">
<tr>
<td><input type="checkbox" /></td>
<td>1111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>555</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>666</td>
</tr>
</table>
<input type="button" value="move" onclick="move();" />
</body>
</html>
追问
但是这样F12调测的时候，会发现，table2里还是没有这个tr的，也就是说，只是table1的数据展示宰了table2里。。。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
就是简单的 DOM 操作而已，示例代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
window.onload = init;
function init(){
var tb1 = document.getElementById('tb1');
var tb2 = document.getElementById('tb2');
var tb1row1 = tb1.getElementsByTagName("tr")[1];
var tb2row1 = tb2.getElementsByTagName("tr")[1];
tb2row1.parentNode.insertBefore(tb1row1, tb2row1);
}
</script>
</head>
<body>
<table id="tb1" border="1">
<tr><td>1-1-1</td><td>1-1-2</td></tr>
<tr><td>1-2-1</td><td>1-2-2</td></tr>
</table>
<br/>
<table id="tb2" border="1">
<tr><td>2-1-1</td><td>2-1-2</td></tr>
<tr><td>2-2-1</td><td>2-2-2</td></tr>
</table>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
