您的位置：首页 > Web前端 > JavaScript

Js操作表格-对表格TR的添加/删除/拷贝

2012-12-05 09:21 513 查看

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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Js操作表格-对表格TR的添加/删除/拷贝</title>

<style>

body { margin:0; padding:0; font-size:12px;}

table, td{ border-collapse:collapse; border:1px solid #ccc;}

td{ padding:10px;}

</style>

</head>

<body>

<input type="button" id="Refresh" value="刷新页面" />

<input type="button" id="Insert_row" value="添加TR" />

<input type="button" id="delRow" value="删除选择" />

<input type="button" id="copyRow" value="拷贝选择" />

<table id="myTable">

<tr>

<td><input type="checkbox" name="checkbox" /></td>

<td>11</td>

<td>11</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox" /></td>

<td>22</td>

<td>22</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox" /></td>

<td>33</td>

<td>33</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox" /></td>

<td>44</td>

<td>44</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox" /></td>

<td>55</td>

<td>55</td>

</tr>

</table>

<script>

var doc = document,

myTable = doc.getElementById("myTable"),

selectBox = myTable.getElementsByTagName("input");

//复制tr

doc.getElementById("copyRow").onclick = function(){

for(var i=0; i<selectBox.length; i++){

if(selectBox[i].checked){

var newTr = myTable.rows[i].cloneNode(true);

newTr.getElementsByTagName("input")[0].checked = false;

myTable.appendChild(newTr);

}

}

}

//删除tr

doc.getElementById("delRow").onclick = function(){

for(var i=selectBox.length-1; i>=0; i--){

if(selectBox[i].checked){

myTable.deleteRow(i);

}

}

}

//添加tr

doc.getElementById("Insert_row").onclick = function(){

var tr = doc.createElement("tr");

for(var i=0; i<3; i++){

var td = doc.createElement("td");

txt = doc.createTextNode("新增");

td.appendChild(txt);

tr.appendChild(td);

if(i==0){

td.innerHTML = "<input type='checkbox' name='checkbox' />"

}

}

myTable.appendChild(tr);

}

//刷新页面

doc.getElementById("Refresh").onclick = function(){

location.reload();

}

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航