<!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>
分享到：
相关推荐
纯前端导出,xlsx.js只能导出不能携带样式，所以我们用了xlsx-js-style插件,可以实现带样式的前端导出表格,样式可自定义，表格背景颜色、字体颜色、表格行高、表格行宽等等都可以自行设置，导出速度快，实现可以自己...
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
非常好的node.js的mis系统的例子，有系统登录、增删改操作、表格、图表。...程序刚下载时还有很多包缺失，但已完全调通，新下载的包也写入到package.json中，把这个例子研究清楚，就可以用node.js做mis系统了。
此功能是在原有demo版本上改进，增加了很多的个别需求实现，在原来的版本是做不到的。 具体的引用js和style我没有上传，此代码只是备忘以及便于各位在使用kendoui这个插件时能更多的运用一些技巧的处理，所以只提供...
先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具… 毕竟公司还在用angularjs+jq. 这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了 话不多说,先来...
增加colStartRowIndex参数，当表格顶部的行有合并所有列的情况下，列宽计算从指定的行开始 2.0 增加 window.onresize事件监听（当触发 window.onresize时自动重新固定表头） 增加左边固定位置鼠标滚轮事件
我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话...
Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这款实例会对你... //增加信息 …… Java实现的点对点短消息发送协议(smpp)开发包源码 70个目标文件，如题。 Java实现的放大...
数据可视化图表：通过HTML5的Canvas或SVG元素，结合JavaScript库如D3.js等，实现数据的可视化展示，例如折线图、柱状图、饼图等，帮助用户更直观地理解数据。 分页功能：如果数据量较大，可以添加分页功能，将数据...
Applet钢琴模拟程序java源码 2个目标文件，提供基本的音乐编辑功能。编辑音乐软件的朋友，这款实例会对你... //增加信息 …… Java实现的点对点短消息发送协议(smpp)开发包源码 70个目标文件，如题。 Java实现的放大...
draggable(options)可以跟很多选项 选项说明：http://docs.jquery.com/UI/Draggables/draggable#options 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html 1.2 Droppables 所需要...
> 今天项目用到了导出table表格，但表头有点特殊，多个合并的单元格。 > 搜索了半天，发现有博主使用 ``xlsx.full.min.js`` 做过此类功能，使用的是vue+elementUI，特在该基础上改进和封装了一下，兼容普通HTML的js...
Interlocked - 为多个线程共享的变量提供原子级的操作 EventWaitHandle - 通知其他线程是否可入的类 Monitor - 提供同步访问对象的机制 ThreadStaticAttribute - 所指定的静态变量对每个线程都是唯一的 25、...
-类似于onReady函数，增加对onInit函数的支持，用来在执行页面初始化脚本之前调用。 -优化复选框列表和单选按钮列表，减少生成的代码量。 -修正CheckBoxList和RadioButtonList无法在回发中更新的BUG（破风、吉吉﹑...
draggable(options)可以跟很多选项 选项说明：http://docs.jquery.com/UI/Draggables/draggable#options 选项实例：http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html 1.2 Droppables 所需要文件...
UniGui例子UniGui开发资料30个合集： BMUniDBGrid1144(内有安装说明).zip checklistbox.rar EasyUI整套皮肤组件_EasyUI 后台模板HTML_后台管理系统模板.zip FMSoft uniGUI Complete Professional Edition v1.0.0....
jh-weapp-demo 小程序 实现的一些效果 ListView相关 GridView相关 eChart分包导入，异步加载，多图表延时加载 自定义导航条，热门搜索和历史搜索框 时间日期选择器、月日周时分选择器、字符串选择器、输入弹框 上下...
在一行内允许显示多个元素的，称为 "行内元素" span,i,b,s,u,sup,sub 作用：包裹文本，并处理文本的表现形式 2、块级元素 每个元素独占一行显示的，称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用：布局 ...