`
刘金剑
  • 浏览: 147854 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js给table自动增加行和删除行

    博客分类:
  • JS
阅读更多

给tbody添加ID

<tbody id="fm2_table_body">
 </tbody>

js代码如下:

//添加行
function addNewPersonRow(){
 i=i+1;
 var bodyObj=document.getElementById("fm2_table_body"); 
 bodyObj.style.display = '';
 if(bodyObj==null){
  alert("Body of Table not Exist!"); 
  return;
 }
 var rowCount = bodyObj.rows.length; 
    var newRow = bodyObj.insertRow(rowCount++);   
    var firstCell = newRow.insertCell(0);
    var secondCell = newRow.insertCell(1);
    var thirdCell = newRow.insertCell(2);
    var fourthCell = newRow.insertCell(3);
    var fiveCell = newRow.insertCell(4);
    thirdCell.setAttribute("align","center");
    fourthCell.setAttribute("align","center");
    //var oStyleSheet=document.styleSheets[0];
 //var oRule=oStyleSheet.cssRules[24];
 //oRule.style.textAlign="";
 
    firstCell.innerHTML = "<input type='checkbox' name='ids' value='0'/>";
    secondCell.innerHTML = ""+rowCount+"";
    thirdCell.innerHTML = "<input type='text' onclick='getReceiveFeilds("+i+");' name='receiveChangeItem"+i+"' id='receiveChangeItem"+i+"' readonly=readonly onpaste='return false' style='border: 0 none;width:300px;'/>";
    fourthCell.innerHTML = "<input type='text' onclick='getSendChangeItem("+i+");' name='sendChangeItem"+i+"' id='sendChangeItem"+i+"' readonly=readonly onpaste='return false' style='border: 0 none;width:300px;'/>";
    fiveCell.innerHTML="<input type='button' class='button_ty' value='删除' onclick='removeNewPersonRow(this)'/>" ;
}
//删除行
function removeNewPersonRow(inputobj){ 
    if(inputobj==null) return; 
    //parentNode是父标签的意思,如果你的TD里用了很多div控制格式,要多调用几次parentNode
    var parentTD = inputobj.parentNode;
    var parentTR = parentTD.parentNode; 
    var parentTBODY = parentTR.parentNode; 
    parentTBODY.removeChild(parentTR);
}

分享到:
评论

相关推荐

    JS 实现Table相同行的单元格自动合并示例代码

    如果相同,那么就删除当前行的单元格,并将前一行单元格的`rowSpan`属性增加1。`rowSpan`属性定义了单元格可以跨越多少行。此过程会持续进行,直到遇到一个值与前一行不同的单元格为止。当这种情况发生时,当前的值...

    常用的js动态增加(删除)table数据行的功能

    在JavaScript中,动态地添加或删除表格数据行是常见的需求,尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能,并提供相关的源码示例。 首先,我们来了解一下HTML表格的基本结构。一个表格由`&lt;table...

    jquery实现table自动添加行和编辑

    本教程将深入探讨如何使用jQuery实现表格(table)的动态添加行和编辑功能,这对于构建数据驱动的Web应用至关重要。 首先,我们需要一个基本的HTML结构来展示表格。一个简单的表格通常包括thead部分(表头)和tbody...

    js获取table行 列 的值

    1. **增加计算功能**:可以在 `check` 函数中加入计算逻辑,比如统计选中行所有单元格的数值之和。 2. **响应式设计**:为了让表格在不同设备上都能正常显示,可以考虑使用 CSS 媒体查询或框架如 Bootstrap 来实现...

    原生js table表格自动排序效果

    在JavaScript的世界里,实现表格(table)数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中,“原生js table表格自动排序效果”提供了一个无需依赖任何外部库(如jQuery...

    纯javascript增加删除表格行

    4. **动态交互**:为了使用户体验更好,可以添加更多的交互功能,比如禁用删除按钮,或者在添加行时自动填充数据。这可以通过检查特定条件或使用`addEventListener`来实现。 5. **性能优化**:在处理大量数据时,应...

    table添加、删减行,单元格添加、修改、删除标记,对于指定标记默认生成显示,浮动定位且不会产生水平导航条

    在IT行业中,尤其是在网页开发和前端交互设计领域,表格(Table)是常用的数据展示和管理工具。本主题聚焦于使用jQuery库对HTML表格进行动态操作,包括添加、删减行,以及对单元格进行标记、修改和删除。jQuery是一...

    通过点击添加按钮即可自动添加一行点击删除即可自动删除一行

    同时,对于“自动删除行”,JavaScript同样监听“删除”按钮的点击事件,然后找到对应的行元素并从DOM(文档对象模型)中移除。 下面是一个简化的JavaScript示例,演示了如何实现这个功能: ```javascript // 获取...

    Table自动生成列

    总的来说,"Table自动生成列"是ASP.NET动态网页开发中的一个重要技能,它结合了服务器端编程和客户端脚本,以提供灵活的数据展示和用户交互。理解并掌握这一技巧,对于任何ASP.NET开发者来说都至关重要。

    table-rowspan表格自动合并单元格插件

    "table-rowspan表格自动合并单元格插件"是专为HTML表格设计的一种工具,它允许开发者通过简单的操作实现单元格的动态合并、添加和删除,极大地提升了用户界面的可读性和交互性。以下是对这个插件及相关知识点的详细...

    Layui表格行添加编辑删除操作和保存数据代码.zip

    本资源“Layui表格行添加编辑删除操作和保存数据代码.zip”包含了一个完整的示例,演示了如何在Layui表格中实现动态的行添加、编辑和删除功能,并且将这些操作与数据保存相结合。下面我们将详细探讨这些知识点。 ...

    BootStrap-table.js 官网下载

    6. **行操作**:支持行选择、行编辑和删除等功能,增强了表格的交互性。 7. **扩展功能**:如行内编辑、固定列、自定义列头、导出数据(CSV、Excel、PDF等)以及列冻结等,可以通过添加扩展插件实现。 8. **响应式...

    js实现对table动态添加、删除和更新的方法

    本文将介绍如何使用JavaScript实现对HTML表格中动态添加、删除和更新行(Row)的方法,这些操作能够帮助开发者更加灵活地管理表格数据。 首先,我们需要了解HTML中表格的基本结构。一个表格由多个`&lt;table&gt;`标签构成...

    JS对表格的动态增加删除行 (多个demo)

    博文中的“多个demo”可能包含了不同的场景和交互方式,比如通过按钮触发增加或删除行,或者根据用户输入自动添加行等。这些示例可以帮助开发者理解不同情况下的实现方法。 6. **事件监听**: JavaScript可以监听...

    自动增加行的动态表格

    标题“自动增加行的动态表格”指的是在网页中实现一种交互式表格,它能够自动添加新的行数据,这种功能在数据录入、管理或展示时非常有用。动态表格通常结合前端JavaScript库或者自定义脚本来实现,允许用户无须刷新...

    JS 添加删除行

    本文将基于给定的脚本代码来详细介绍如何使用JavaScript(简称JS)实现动态添加、删除行以及对齐剩下的元素下标等功能。 #### 二、关键函数解析 ##### 1. `get_Element` 函数 该函数用于获取指定标签名的DOM元素...

    EasyTable.js插件1.0

    EasyTable.js插件1.0是一款专为HTML页面前端表格布局设计的JavaScript工具,它旨在简化和优化网页中表格的创建和管理。在HTML中,表格的构建通常涉及大量繁琐的HTML标记,而EasyTable.js则通过提供简洁的API,使得...

    javascript动态添加表格数据行

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

    bootstrap-table.js2019.zip

    1. **基本使用**:Bootstrap Table通过HTML标记和JavaScript插件实现,只需要在HTML中添加特定的class和data属性,然后引入js和css文件即可创建一个基础的表格。 2. **数据源**:Bootstrap Table支持多种数据源,...

    免费下载bootstrap_table参考代码.rar

    10. **API控制**:通过 JavaScript API 和数据属性,可以实现表格的动态操作,如添加、删除、更新行数据。 为了使用这些功能,开发者需要在 HTML 中设置表格结构,并通过 JavaScript 进行初始化和配置。压缩包中的 ...

Global site tag (gtag.js) - Google Analytics