`

用Javascript实现添加删除表格行

阅读更多

 function addRow(obj)
02 {
03     var clickedRow = obj;
04
05     while(clickedRow.tagName != "TR")
06     {
07         clickedRow = clickedRow.parentNode;
08     }
09
10     var clickedTable = clickedRow.parentNode;
11
12     var newRow = clickedTable.insertRow(clickedRow.rowIndex + 1);
13
14     newRow.className = clickedRow.className;
15
16     for(var i = 0; i < clickedRow.childNodes.length; i++)
17     {
18         if (clickedRow.childNodes[i].tagName != "TD")
19         {
20             continue;
21         }
22
23         var newCell = clickedRow.childNodes[i].cloneNode(true);
24
25         for(var j = 0; j < newCell.childNodes.length; j++)
26         {
27             if (newCell.childNodes[j].value)
28             {
29                 newCell.childNodes[j].value = "";
30             }
31         }
32
33         newRow.appendChild(newCell);
34     }
35 }
36
37 function removeRow(obj)
38 {
39     var clickedRow = obj;
40
41     while(clickedRow.tagName != "TR")
42     {
43         clickedRow = clickedRow.parentNode;
44     }
45
46     clickedRow.parentNode.removeChild(clickedRow);
47 }

调用方式:摘要在单元格里找一个载体,加上事件就可以了:如:onclick="addRow(this)" / onclick="removeRow(this)"

代码兼容IE/Firefox。

==========================================

补充一个如何删除表格中的列:

1 function removeCol(col_index){
2     for (var i = 0; i < document.getElementById("table").rows.length; i++) {
3         document.getElementById("table").rows[i].deleteCell(col_index);
4     }
5 }

分享到:
评论

相关推荐

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    javascript实现表格添加删除等操作

    这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其适合初学者进行学习和实践。 首先,`students.html`文件很可能是用来展示表格结构...

    js 添加删除表格

    以下是一个简单的例子,展示如何使用JavaScript添加和删除表格行: ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...

    纯javascript增加删除表格行

    3. **删除行**:删除表格行通常涉及到选择要删除的行,并调用`removeChild()`方法。例如,假设我们想删除点击时的当前行,可以这样实现: ```javascript function deleteRow(event) { if (confirm('确定要删除...

    javascript实现动态添加删除表格行

    NULL 博文链接:https://1148130696.iteye.com/blog/1726191

    javascript动态添加表格数据行

    总结来说,这个示例展示了如何使用JavaScript在前端动态添加表格行,以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术(如IE6和ASP),但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...

    JavaScript动态操作表格,添加,删除行、列及单元格

    JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    JAVASCRIPT自动添加表格

    本篇文章将深入探讨如何使用JavaScript自动添加、删除表格,以及实现窗口居中显示的相关技术。 首先,让我们来理解“JavaScript自动添加表格”。在HTML中,表格由`&lt;table&gt;`元素定义,行(`&lt;tr&gt;`)、列(`&lt;td&gt;`或`&lt;th&gt;`...

    【JavaScript源代码】js实现添加删除表格操作.docx

    在JavaScript编程中,实现添加和删除表格操作是常见的任务,特别是在动态交互的网页应用中。以下将详细解析如何使用JavaScript来实现这个功能。 首先,HTML结构是基础,它定义了表格的基本布局。在这个例子中,我们...

    动态添加/删除表格行并提交内容到后台

    总结起来,实现动态添加/删除表格行并提交内容到后台的过程涉及前端JavaScript的事件监听、DOM操作以及AJAX请求,后端C#的HTTP请求处理和数据库操作。这种功能在实际项目中非常常见,对于初学者来说,理解并掌握这些...

    动态插入、添加删除表格行的JS代码

    ### 动态插入、添加删除表格行的JS代码 在网页开发中,表格是一个非常重要的元素,用于展示数据。为了使网页更具交互性,我们常常需要动态地对表格进行操作,比如插入或删除行等。本文将通过一个具体的示例来讲解...

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    jQuery 动态添加或删除表格行

    以上就是使用jQuery动态添加和删除表格行的基本方法。在实际开发中,可能还需要根据具体需求进行扩展和优化,如验证数据、动画效果等。通过熟练掌握jQuery,你可以轻松地构建交互性强、用户体验优良的网页应用。

    jquery表格动态添加删除行代码.zip

    总的来说,"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript(主要是jQuery)的示例,它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用,例如在线...

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    在JavaScript编程中,实现动态添加和删除表格行是一项常见的需求,尤其在构建数据表或配置界面时。这个功能包括在表格中添加新行、删除现有行,并确保在操作过程中序号自动生成和更新。以下是对这个"js实现添加删除...

    基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。 1.jsp 产品名称 编号 数量 重量 操作 ...

    动态添加删除表!格动态添加删除表格!

    在IT领域,尤其是在网页开发和用户界面设计中,动态添加删除表格是一项常用的技术。它允许用户根据需求在界面上自由地增加或减少表格行或列,提高了交互性和用户体验。本篇将深入探讨这一主题,主要关注如何实现这个...

Global site tag (gtag.js) - Google Analytics