最近帮同学做一个Ajax小控件，遇到了一个动态删除表格行的问题。经过反复试验后，以下代码在FF和IE（相当鄙视）中均有效：
页面部分：
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<table id="tableI" cellpadding="1" cellspacing="1" border="1">
<tr>
<td>0a</td>
<td>aa</td>
<td><button onclick="a(this)">bbb</button>
</tr>
<tr>
<td>1a</td>
<td>aa</td>
<td><button onclick="a(this)">bbb</button>
</tr>
<tr>
<td>2a</td>
<td>aa</td>
<td><button onclick="a(this)">bbb</button>
</tr>
<tr>
<td>3a</td>
<td>aa</td>
<td><button onclick="a(this)">bbb</button>
</tr>
<tr>
<td>4a</td>
<td>aa</td>
<td><button onclick="a(this)">bbb</button>
</tr>
<tr>
<td>5a</td>
<td>aa</td>
<td><button onclick="a(this)">bbb</button>
</tr>
<tr>
<td>6a</td>
<td>aa</td>
<td><button onclick="a(this)">bbb</button>
</tr>
</table>
</body>
</html>
JavaScript部分（a.js）
var tableI;//要找到的table
var trI;//要删除的tr
var index;//tr所在table的index，从0开始
function a(obj) {
tableI = document.getElementById("tableI");//找到要删除行所在的teble
trI = obj.parentNode.parentNode;//我的button在tr下的td中，两次执行.parentNode操作，可以找到要删除的tr。
index = trI.rowIndex;//要删除的tr所在table中的index
tableI.deleteRow(index);//执行删除
}
分享到：
相关推荐
在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...
动态地删除TABLE中的多行，实际上就是通过JavaScript删除表格中的TR元素。 在JavaScript中，可以使用多种方法来实现这一操作。常见的方法有： 1. 使用`document.querySelectorAll`方法配合CSS选择器来选取需要删除...
这可以通过使用模板引擎（如Handlebars或Pug）或者在JavaScript框架（如React、Vue或Angular）中动态生成DOM元素来完成。数据模型应支持动态添加和删除行或列，以适应不断变化的数据集。 3. **横向拖动**：实现横向...
在网页开发中，表格是一种常见的数据展示和交互元素，而JavaScript（JS）表格组件则为开发者提供了强大的工具，用于创建功能丰富的动态表格。这些组件通常包括但不限于排序、过滤、分页、编辑、列自定义等功能，大大...
本文件利用 AJAX 和JavaScript实现了动态生成表格,以及对表格的修改,删除多行并返回数据库更新.可以选中单行,不连续的多行,和连续的多行(shift 拖选),在前台按列排序. 仿excel,在前台按列进行排序,倒序等 欢迎大家...
AmazeUI表格是一款基于前端框架AmazeUI的组件，它为网页开发...在阅读博文（https://onestopweb.iteye.com/blog/2276857）时，可以获取更多关于AmazeUI表格的使用技巧和最佳实践，以及与其他AmazeUI组件的集成方法。
使用这些JavaScript表格控件能够大大提高Web应用程序的用户体验，让开发者更专注于业务逻辑的实现，而非界面细节的打磨。同时，这些控件也能够有效地帮助管理复杂的数据，并提供用户友好的数据交互界面。
• 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象模型方法显示和修改表格内容 • 13.7.htm “相对位置”...
• 13.4.htm DHTML对象模型方法新增和删除表格行内容 • 13.5.htm W3C对象模型方法显示和修改网页内容 • 13.6.htm W3C对象模型方法显示和修改表格内容 • 13.7.htm “相对位置”...
在本压缩包中，我们关注的是“j2EE05”和“js03”的相关技术，主要包括表单验证、级联列表、节点操作（添加删除附件）以及对表格的增删改查功能。这些都是在Web开发中非常关键的元素，尤其是在构建交互性强的Web应用...
3. jQuery动态生成表单：利用jQuery的append()方法，根据业务需求动态生成表单元素。例如，创建一个输入框和提交按钮。 ```javascript var formData = [ { type: 'text', label: '姓名', name: 'username' }, { ...
本文将深入探讨如何使用纯JavaScript实现动态的行添加与删除功能，尤其关注在特定条件下的按钮显示逻辑。这个功能通常应用于表格或者列表的管理，比如在线表单、任务列表等。 首先，我们需要创建一个基础的HTML结构...
对于表格内容的读取，jqGrid提供了`getGridParam`和`getRowData`方法，前者可以获取整个表格的配置参数，后者可以获取单行或所有行的数据。 在实际应用中，我们还可能涉及其他高级特性，比如编辑、添加和删除数据，...
在提供的"实例源码"中，DmZtree可能是一个包含了以上技术的应用示例，具体可能涵盖了如何使用Ajax与后台交互获取数据，如何利用Ztree展示层级结构，以及如何使用GridView以单行形式展示4条数据并计算金额合计。...
以下是对 `bootstrap table` 使用方法的详细解析： 1. **引入依赖**： 在使用 Bootstrap Table 之前，你需要引入相关的 CSS 和 JavaScript 文件。这包括 Bootstrap 的基础样式文件（`bootstrap.min.css` 和 `...
jqGrid是一款基于jQuery的开源数据网格插件，用于在网页上展示和操作表格数据，它提供了丰富的功能，如数据分页、排序、过滤、编辑、添加、删除等，且具有高度自定义性。这个"jqGrid（jqueryGrid表格操作demo）"是一...