`

javaScirpt 动态在table 插入行

阅读更多
   最近在工作的时候,遇到动态的向table 中添加行数据,
javaScript  代码:

1:添加动态行函数:

  function addRow(){
   ++rowIndex; //全局变量,用于记录增加行的标志,以便与数据输入信息的统计
   var table_id = document.getElementById("table1")// table1:表示要实现动态添加行
                                                 // table 的ID  值
   var new_row = table_id.insertRow(table_id.rows.length);//
                                      table_id.rows.length:表示:id为table1已经存在的行数
       new_row.setAttribute("id","row"+rowIndex);//设置新行 id
   var new_col=new_row.insertCell(0);//设置新添加行中的一列,以0开始
    new_col.width="8%";
    new_col.innerText="xxx";
    var new_col=new_row.insertCell(1);
     new_col.width="11%";
    new_col.innerHTML="<input type='text'      style='width:80%' 
                  id='xxxxx"+rowIndex+"'
               name='xxxxx"+rowIndex+"' > 
  
   }
2:删除新添加的一行数据:
  function delete_row(re){// re 表示要删除行的id值
var i;
var docu = document.getElementById("table1");
i = docu.rows(re).rowIndex;
docu.deleteRow(i);

}
分享到:
评论

相关推荐

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

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

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    javascript动态添加table

    在JavaScript中,动态添加table是一种常见的任务,尤其在构建数据驱动的Web应用时。这个功能允许开发者在用户交互或后台数据变化时实时更新页面上的表格。以下是对这一知识点的详细阐述: 1. **HTML表格基础** 在...

    LayUI table新增空白行

    在这种情况下,通过对LayUI的table模块进行自定义修改,我们可以实现动态数据加载时插入空白行的功能。 首先,理解LayUI的table模块。LayUI的table组件是一个强大的数据展示工具,它支持各种操作,如分页、排序、...

    table动态添加行并编辑

    使用JavaScript,我们可以根据需求在运行时动态地向表格中添加行。通常涉及以下步骤: 1. 获取表格对象:通过DOM(Document Object Model)接口,如`document.getElementById`或`document.querySelector`来获取`...

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...

    JSP中使用JavaScript动态插入删除输入框实现代码.docx

    在本文中,我们将介绍如何在JSP中使用JavaScript实现动态插入删除输入框的功能。 一、JavaScript动态插入删除输入框的实现代码 在JSP中,使用JavaScript可以实现动态插入删除输入框的功能。下面是实现代码: ```...

    table动态添加行

    "table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先,我们要理解基本的`HTML`表格结构。一个简单的`HTML`表格由`&lt;table&gt;`标签开始,内部包含`&lt;tr&gt;`(表格行)、`&lt;th&gt;`(表头单元格)和`&lt;td&gt;`...

    一个动态添加table行的js例子

    在JavaScript编程中,动态添加和删除表格行是一个常见的需求,特别是在网页交互和数据展示中。这个例子主要展示了如何使用JS实现这一功能。首先,我们来理解这个“动态添加table行的js例子”的核心知识点。 1. **...

    表格动态插入行

    在网页开发中,表格是一种...总结来说,"表格动态插入行"是JavaScript在网页开发中的实用技巧,它使得数据展示更加灵活,用户交互性更强。通过学习和实践这一知识点,开发者可以提升网页的用户体验,实现更丰富的功能。

    jstable添加行删除行复制行

    在处理表格(Table)元素时,JavaScript可以帮助我们实现实时的动态操作,比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素。它用于创建表格,...

    动态增加table行

    在JavaScript中,我们可以通过DOM操作来动态地创建和插入这些元素。 1. **初始化和动态添加、删除列的隔行换色**: 隔行换色通常用于提高表格的可读性,通过CSS实现。例如,我们可以为偶数行和奇数行设置不同的...

    javascript插入表格空白行 示例源码

    在JavaScript编程中,插入表格空白行是一项常见的任务,特别是在网页动态数据展示时。这个示例源码可能展示了如何使用纯JavaScript来实现这一功能。在.NET环境中,JavaScript通常用于客户端交互,而服务器端语言如C#...

    JS实现动态修改table及合并单元格的方法示例

    在JavaScript中,动态修改表格(Table)以及合并单元格是常见的需求,特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先,要动态修改表格,我们需要获取表格元素。在HTML中,表格...

    javascript动态操作表格

    使用JavaScript,我们可以动态创建这些元素并插入到文档中。例如: ```javascript // 创建一个新的表格 var table = document.createElement('table'); // 创建一行 var row = document.createElement('tr'); // ...

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

    在本文中,我们将深入探讨如何使用JavaScript来动态地操作表格,包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下,实现灵活的数据管理功能。 1. **创建表格** 在HTML中,我们可以使用`&lt;table...

    表格动态追加、插入、删除行

    这篇博客文章“表格动态追加、插入、删除行”可能详细介绍了如何在网页中实现这些操作。虽然没有提供直接的博客内容,但我们可以根据这个主题进行深入的讨论。 首先,我们要理解表格(Table)在HTML中的基本结构。...

    js的节点操作动态创建table表格,创建行,删除行.pdf

    JavaScript 动态创建 Table 表格和节点操作 根据提供的文件信息,我们可以总结出以下知识点: 1. 节点操作 在 HTML 文档中,所有内容都是节点,包括文档节点、元素节点、文本节点、属性节点和注释节点。节点操作...

    一个用于将JSON数据转换为Table的JavaScript库

    7. **兼容性**:作为JavaScript库,json-table-converter应该能够在大多数现代浏览器中运行,但需要注意的是,对于较旧的浏览器,可能需要考虑polyfills以支持不被广泛支持的JavaScript特性。 8. **文档与示例**:...

Global site tag (gtag.js) - Google Analytics