<html>
<head>
<title>Adding and Removing Rows from a table using DHTML and JavaScript</title>
<script language="javascript">
//add a new row to the table
function addRow()
{
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("tblGrid").insertRow();
newRow.setAttribute("className","tr2");//设置增加行的class属性
newRow.setAttribute("align","center");//设置增加行的align属性
//add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes
var oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t1'>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t2'>";
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='button' value='Delete' onclick='removeRow(this);'/>";
}
//deletes the specified row from the table
function removeRow(src)
{
var oRow = src.parentElement.parentElement;
document.all("tblGrid").deleteRow(oRow.rowIndex);
}
</script>
</head>
<body>
Demo of a simple table grid that allows adding and deleting rows using DHTML
and Javascript
<table id="tblGrid" style="table-layout:fixed" border="1">
<tr>
<td width="150px">姓名</td>
<td width="150px">年龄</td>
<td width="250px">操作</td>
</tr>
<tr>
<td><input type="text" name="t1" /></td>
<td><input type="text" name="t2" /></td>
<td align="center"><input type="button" value="Delete" onclick="removeRow(this);" /></td>
</tr>
</table>
<hr>
<input type="button" value="Add Row" onclick="addRow();" />
<hr>
</a>
</body>
</html>
上面的代码实现了，对table的增加跟删除，在具体项目中的应用，需要通过Ajax的异步调用，通过后台传过的数据，动态的把值赋给单元格，代码上的删除只是删除的单元行，没有真正的删除数据，这样就可以做局部刷新（异步删除数据）
分享到：
相关推荐
在JavaScript（JS）中，动态操作表格是一种常见的需求，它涉及到HTML DOM（Document Object Model）的元素操作。本文将深入探讨如何使用JavaScript实现对表格的动态添加、删除、修改和查询功能，结合给出的标签...
总结起来，jQuery为动态操作HTML表格提供了强大的工具。在这个示例中，我们学习了如何使用jQuery从JSON数据生成表格，并展示了jQuery的几个核心方法。这个技巧不仅适用于填充表格，还可以应用于其他需要动态生成或...
使用javascript实现table动态增加删除行列。
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
本教程将深入探讨如何使用jQuery实现动态更改table表格数据，让你的网页表格具有实时编辑功能，提升用户体验。 首先，我们需要理解HTML表格的基本结构。一个基本的表格由`<table>`元素开始，包含若干个`<tr>`（行）...
本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...
在Web开发中，动态创建Table是一种常见的需求，特别是在数据展示或者用户交互时。本文将深入探讨如何利用纯JavaScript实现动态表格，并涵盖相关的重要知识点。 首先，我们讨论基础的DOM（Document Object Model）...
本文代码主要实现了javascript如何操作table并动态添加行的方法
在JavaScript中，动态操作HTML表格（table）是常见的任务，特别是在网页交互和数据展示中。以下将详细解释如何通过JS实现动态新增和删除表格的行和列信息。 首先，我们需要获取表格对象。在示例中，通过`document....
在网页开发中，表格（Table）是一种常见的数据展示方式，特别是在需要展示结构化信息时。JavaScript（js）作为客户端脚本语言，使得我们能够实现表格的动态交互功能，如动态添加行、行编辑以及行数据修改。下面我们...
总之，“动态的显示table列”这个主题涵盖了许多前端开发的基本技巧，包括DOM操作、事件处理和用户交互。结合jQuery插件和源码分析，开发者可以掌握更高级的Web界面动态构建技术。对于那些需要处理大量数据并提供...
### JavaScript 动态生成 Table 及处理 在现代 Web 开发中，动态生成 HTML 元素是一种非常实用的技术，尤其当涉及到数据展示时，如表格（`<table>`）。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。...
针对Table的操作,针对Table增加/删除 行和列,向上移,向下移.etc
"table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先，我们要理解基本的`HTML`表格结构。一个简单的`HTML`表格由`<table>`标签开始，内部包含`<tr>`（表格行）、`<th>`（表头单元格）和`<td>`...
Bootstrap Table是一种基于HTML和JavaScript的前端组件，它利用Bootstrap框架的样式和JavaScript功能，为网页提供了一种美观、可操作的表格展示方式。本主题主要关注如何在Bootstrap Table中动态加载JSON数据并实现...
在这个例子中，`动态生成table.htm`可能是一个包含上述代码的HTML文件，用于演示这些操作。而`aa`可能是其他辅助文件，如样式表（.css）或脚本（.js），用于增强表格的样式或功能。 总的来说，JavaScript动态生成...
总的来说，动态添加Table表格是ASP.NET Web Forms开发中的一个基础但重要的技能，结合C#编程和数据库操作，可以构建出灵活、数据驱动的用户界面。在实际项目中，还需要考虑性能优化、错误处理和跨浏览器兼容性等问题...
JavaScript 动态创建 Table 表格和节点操作 根据提供的文件信息，我们可以总结出以下知识点： 1. 节点操作 在 HTML 文档中，所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点。节点操作...
在IT领域，特别是软件开发与数据库管理中，动态定义table是一项关键技能，它允许开发者根据运行时的需求构建数据结构，增强了程序的灵活性和适应性。本文将深入探讨如何在C#环境中动态创建并更新table，解析给定代码...