<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='删除' onclick=\"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>
分享到:
- 2008-12-09 15:05
- 浏览 1649
- 评论(2)
- 论坛回复 / 浏览 (2 / 6504)
- 查看更多
相关推荐
NULL 博文链接:https://jeasony.iteye.com/blog/353914
NULL 博文链接:https://long316.iteye.com/blog/1393886
js 添加删除表格 博文链接:https://huashaozhawei.iteye.com/blog/151792
动态添加js,动态添加表格和删除表格,批量添加记录,批量添加
动态添加/删除表格行并实现前后台的互动,用最基础的c#和js知识实现,可以作为新手参考。
NULL 博文链接:https://1148130696.iteye.com/blog/1726191
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
原生js可编辑表格实现动态添加表格行数和删除表格行数
动态插入、添加删除表格行的JS代码,网页表格操作必要的知识
JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
js 操作表格动态添加和删除行
js实现添加删除表格操作 本文实例为大家分享了js实现添加删除表格的具体代码,供大家参考,具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击...
3.动态添加节点/动态删除节点/动态移动节点 4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格...
vue动态添加删除表格数据特效源码.zip
用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能,接下来通过代码实例给大家介绍JavaScript实现动态添加删除表格的行,...
js动态的绘制表格很好的例子,包括如何动态的去添加 修改 和删除表格 以及遍历表格内容
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下