js 动态增加、删除表格
代码:
<html>
<head>
<title>js动态增加、删除表格</title>
</head>
<body>
<form method="post" action="">
<input type="button" value="添加" οnclick="addMyRow();"><input type="button" value="删除所有" οnclick="delAllMyRow();">
<table border="1" style="width:75%;border:1px;">
<thead>
<tr bgcolor="#c8b4cd">
<td align="center">
序号
</td>
<td align="center">
姓名
</td>
<td align="center">
性别
</td>
<td align="center">
爱好
</td>
<td align="center">
籍贯
</td>
<td align="center">
操作
</td>
</tr>
</thead>
<tbody id="mybody">
<!----动态表格内容----->
</tbody>
</table>
</form>
</body>
</html>
<script type="text/javascript">
//全局变量
var i=0;
//添加行
function addMyRow(){
var mytable = document.getElementById("mybody");
var mytr = mytable.insertRow(); //插入行
//插入行单元格的值
mytr.insertCell(0).innerHTML = i+1;
mytr.insertCell(1).innerHTML="<input type='hidden' name='"+i+"'/><input type='text' name='myname"+i+"'/>";
mytr.insertCell(2).innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";
mytr.insertCell(3).innerHTML="<input type='checkbox' name='mylove"+i+"' value='1'/>上网<input type='checkbox' name='mylove"+i+"' value='2'/>篮球<input type='checkbox' name='mylove"+i+"' value='3'/>游泳";
mytr.insertCell(4).innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";
mytr.insertCell(5).innerHTML="<input type='button' value='删除' οnclick='delMyRow(this);'/>";
i++;
}
//删除当前行
function delMyRow(r){
var i=r.parentNode.parentNode.rowIndex; //当前行
var mytable = document.getElementById('mybody'); //获取table对象
mytable.deleteRow(i-1);
}
//删除所有行
function delAllMyRow(){
var mytable = document.getElementById("mybody");
var rowlen=mytable.rows.length;
for(var i=rowlen-1;i>=0;i--){
mytable.deleteRow(i);
}
}
</script>