JS动态生成表格

最新推荐文章于 2023-08-08 00:00:00 发布

kyoyaoyuan

最新推荐文章于 2023-08-08 00:00:00 发布

阅读量538

点赞数

分类专栏： javascript 文章标签： input button function border table

本文链接：https://blog.csdn.net/kyoyaoyuan/article/details/4061774

版权

3 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
//全局变量
var i=0;
//添加行
function addMyRow(){
var mytable = document.getElementById("mybody");
var mytr = mytable.insertRow();
mytr.setAttribute("id","tr"+i);
var mytd_1=mytr.insertCell();
var mytd_2=mytr.insertCell();
var mytd_3=mytr.insertCell();
var mytd_4=mytr.insertCell();
var mytd_5=mytr.insertCell();
mytd_1.innerHTML="<input type='text' name='myname"+i+"'/>";
mytd_2.innerHTML="<input type='radio' name='mysex"+i+"' value='1'/>男<input type='radio' name='mysex"+i+"' value='2'/>女";
mytd_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'/>游泳";
mytd_4.innerHTML="<select name='myjg"+i+"'><option value='1'>北京</option><option value='2'>河北</option><option value='3'>天津</option></select>";
mytd_5.innerHTML="<input type='button' value='删除' οnclick=/"delMyRow('"+i+"')/"/>";
i++;
}
//删除当前行
function delMyRow(j){
var mytable = document.getElementById("mybody");
var myrow = document.getElementById("tr"+j);
mytable.deleteRow(myrow.rowIndex-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>

<input type="button" value="添加" onclick="addMyRow();"><input type="button" value="删除所有" onclick="delAllMyRow();">
<table border="1">
<thead>
<tr bgcolor="red">
<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>