<!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>
分享到：
相关推荐
在实际应用中，我们有时需要在一个页面中同时展示并操作多个表格，特别是在数据分析、报表设计等领域，这种需求尤为常见。本篇将详细讲解如何利用SpreadJS在同一行内实现两个表格的数据绑定，帮助开发者更好地理解和...
这个过程涉及到LayUI的组件引用、表格初始化、数据处理以及事件绑定等多个知识点。LayUI的灵活性和易用性使得开发人员能够快速地构建出交互丰富的Web界面。在实际项目中，可以根据具体需求调整和扩展这些功能，如...
综上所述，Bootstrap动态表格模板是一个集成了筛选、分页和排序功能的高效工具，它利用Bootstrap的表格组件和JavaScript功能，提供了强大的数据展示和交互能力。在实际开发中，开发者可以依据这个模板，结合自身项目...
总的来说，HTML表格数据导出插件通过JavaScript实现了从HTML到Excel的转换，这不仅方便了用户对数据的存储和处理，也为网页应用提供了更多互动性。通过理解这一过程，开发者可以进一步定制化自己的数据导出功能，以...
综上所述，“表格滑动demo”是一个关于前端开发中实现高效、流畅的表格滚动效果的话题，涵盖了CSS布局、JavaScript编程、响应式设计、性能优化等多个方面，旨在提升用户在操作大型表格时的体验。
这个特性允许用户通过简单的鼠标操作来动态改变表格列宽，提高用户体验。我们将基于提供的"jQuery拖动改变表格列宽度resizableColumns"的demo进行讲解。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM...
在网页设计中，创建带有斜线的表格表头可以增加信息层次感，使得数据更易于理解。本示例探讨如何使用JavaScript（js）来实现这一功能。JavaScript是一种强大的客户端脚本语言，它允许我们在用户的浏览器上动态地创建...
在IT行业中，前端开发是构建用户界面的关键环节，Vue.js作为一个流行的JavaScript框架，因其轻量级、易上手和强大的功能而备受开发者喜爱。本示例"表格拆分合并demo.zip"聚焦于Vue.js中表格组件的一个特定应用场景：...
在这种情况下，通过对LayUI的table模块进行自定义修改，我们可以实现动态数据加载时插入空白行的功能。 首先，理解LayUI的table模块。LayUI的table组件是一个强大的数据展示工具，它支持各种操作，如分页、排序、...
标题“spreadjs_动态添加表头及数据绑定-demo.zip”所指的，是使用SpreadJS库创建的一个示例，该示例演示了如何在JavaScript环境中动态地添加表格表头并实现数据绑定。SpreadJS是一款强大的JavaScript电子表格组件，...
对于这个Demo，我们假设它使用了某种前端框架（可能是Vue.js，因为`auto_disable_tableHeadjs-master`这样的文件名暗示了它可能是Vue的一个项目），并且结合了特定的表格组件，如Element UI或Ant Design Vue，这些...
4. **表格控件**：表格是数据展示的重要工具，LayUI的表格组件支持动态加载、排序、筛选、分页等功能，同时还可以进行行操作，如编辑、删除等。此外，它还支持自定义模板，方便定制复杂的数据展示需求。 5. **穿梭...
本示例"grid表格 简单demo"旨在介绍如何使用ExtJS库创建一个基本的Grid表格，帮助开发者理解其核心概念和功能。 ExtJS是一个强大的JavaScript框架，用于构建富客户端Web应用。它提供了丰富的组件库，其中Grid组件是...
"js 删除动态创建的行"这个主题涉及到如何在HTML表格中动态添加行，并且能够根据需求删除特定行。这里我们将详细探讨这个过程，以及如何实现自动添加行号。 首先，动态创建HTML表格行通常涉及以下步骤： 1. **获取...
这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档，帮助我们理解和应用 Datagrid。 首先，`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档，它...
"easyui_demo_DEMO_easyui的一个demo_easyui_" 这个标题表明这是一个关于 EasyUI 的演示项目，用于展示其组件的功能和用法。 在描述中提到，这是一个 EasyUI 界面的模板，意味着它包含了一个基本的框架，可以被导入...
### jQuery+ajax实现动态添加表格tr td功能 ...本文展示的示例是一个动态添加表格tr td功能的基础实现，通过实践这个例子，读者可以加深对jQuery和ajax技术的理解，并学会将这些技术应用到实际的Web开发中。
7. **状态管理**：如果页面有多个表格或需要在页面间保持选中状态，可以使用状态管理库（如Vuex、Redux等），或者简单的JavaScript对象来跟踪已选中的行。 8. **响应式设计**：现代Web应用需要考虑不同设备的适配，...