今天闲来无事，用js做了个小例子，动态添加和删除表格行，附上源码。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态增加和删除表格行</title>
<script type="text/javascript">
window.onload = function addRow() {
var name = document.getElementById("name").value;
var age = document.getElementById("age").value;
var nameText = document.createTextNode(name); //创建文本节点
var ageText = document.createTextNode(age);
var nameTd = document.createElement("td"); //创建td节点
var ageTd = document.createElement("td");
var tr = document.createElement("tr"); //创建tr节点
nameTd.appendChild(nameText);
ageTd.appendChild(ageText);
tr.appendChild(nameTd);
tr.appendChild(ageTd);
var tbody = document.getElementById("tbody");
tbody.appendChild(tr);
}
function delRow() {
var objTbody = document.getElementById("tbody");
objTbody.removeChild(objTbody.lastChild); //删除最后一个子节点，因为表格每删除一行行号会自动发生变化。所以每次从最后删除
}
</script>
</head>
<body>
<table id="t1" border="1">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>name1</td>
<td>25</td>
</tr>
<tr>
<td>name2</td>
<td>26</td>
</tr>
</tbody>
</table>
<hr>
Name:<input type="text" id="name" />Age:<input type="text" id="age" />
<input type="button" value="add" onclick="addRow()"/>
<input type="button" value="del" onclick="delRow()"/>
</body>
</html>
分享到：
- 2009-06-04 09:47
- 浏览 1037
- 评论(0)
- 论坛回复 / 浏览 (0 / 3379)
- 查看更多
相关推荐
NULL 博文链接：https://1148130696.iteye.com/blog/1726191
JavaScript动态操作表格，添加，删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
NULL 博文链接：https://long316.iteye.com/blog/1393886
静态实现javascript，实现表格的增加和删除等功能，值得初学者学习
用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能，接下来通过代码实例给大家介绍JavaScript实现动态添加删除表格的行，...
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
本文实例为大家分享了js实现添加删除表格的具体代码，供大家参考，具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击事件 2、点击删除按钮 ...
本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码，供大家参考，具体内容如下 动态生成一个带删除行功能的表格： 实现思路 1、获取表格元素 2、获取要填充的数据，一般是从数据库取数据，也...
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
用JavaScript制作的动态表格，有添加、删除、全选、全不选，有对动态新增的域校验问题，有对新增的域设置readonly问题，还有对新增域中的span进行隐藏问题都有解决，还有对动态表格的讲解PPT一份。
主要是对JavaScript动态操作表格实例(添加,删除行,列及单元格)进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
JS自动添加，删除表格总结，及window窗体居中。内含源代码！！！！
主要介绍了JavaScript实现动态添加，删除行的方法,较为详细的分析了javascript操作table表格实现针对表格元素动态操作的相关技巧,需要的朋友可以参考下
在一些系统使用中，我们常会遇到需要添加或删除行的要求，本例可以快速简洁地实现这功能(里面的返回需改成javascript:history.go(-1))
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
本文实例讲述了JavaScript实现动态添加、移除元素或属性的方法。分享给大家供大家参考，具体如下： JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore...
然后获取了表格元素及其 tbody 元素，通过 for 循环遍历数组中的每个学生，动态创建了表格的每一行和每个单元格，并将学生的信息填充到对应的单元格中。 最后，为每行的删除操作添加了点击事件处理程序。当用户单击...
实现将输入的信息添加到表格、删除表格内容的功能，适合前端初学者巩固DOM相关知识。涉及全选、反选，几种表单标签的使用。