首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。
如图：
对应的html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="js/editTable.js" language="javascript"></script>
</head>
<body>
<input type="button" value="新增" onclick="createRow()">
<input type="button" value="删除" onclick="delRow()">
<table id="editTable" border="1" width="800">
<tr>
<th>选择</th>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tbody id="tbody">
</tbody>
</table>
</body>
</html>
然后我们编写javascript脚本完成动态增加行的操作：
function createRow(){
var editTable=document.getElementById("tbody");
var tr=document.createElement("tr");
var td0=document.createElement("td");
var checkbox=document.createElement("input");
checkbox.type="checkbox";
checkbox.name="checkRow";
td0.appendChild(checkbox);
var td1=document.createElement("td");
td1.innerHTML="<input type='text' />";
var td2=document.createElement("td");
td2.innerHTML="a2";
var td3=document.createElement("td");
td3.innerHTML="a3";
tr.appendChild(td0);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
editTable.appendChild(tr);
}
创建tr和td元素，增加行。
效果：
在编写删除按钮的javascript脚本
function delRow(){
var editTable=document.getElementById("tbody");
if(confirm("确认删除所选?")){
var checkboxs=document.getElementsByName("checkRow");
for(var i=0;i<checkboxs.length;i++){
if(checkboxs[i].checked){
var n=checkboxs[i].parentNode.parentNode;
editTable.removeChild(n);
i--;
}
}
}
}
效果：
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
