给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);
}
相关推荐
如果相同,那么就删除当前行的单元格,并将前一行单元格的`rowSpan`属性增加1。`rowSpan`属性定义了单元格可以跨越多少行。此过程会持续进行,直到遇到一个值与前一行不同的单元格为止。当这种情况发生时,当前的值...
在JavaScript中,动态地添加或删除表格数据行是常见的需求,尤其在开发交互式Web应用时。本篇文章将深入探讨如何实现这些功能,并提供相关的源码示例。 首先,我们来了解一下HTML表格的基本结构。一个表格由`<table...
本教程将深入探讨如何使用jQuery实现表格(table)的动态添加行和编辑功能,这对于构建数据驱动的Web应用至关重要。 首先,我们需要一个基本的HTML结构来展示表格。一个简单的表格通常包括thead部分(表头)和tbody...
1. **增加计算功能**:可以在 `check` 函数中加入计算逻辑,比如统计选中行所有单元格的数值之和。 2. **响应式设计**:为了让表格在不同设备上都能正常显示,可以考虑使用 CSS 媒体查询或框架如 Bootstrap 来实现...
在JavaScript的世界里,实现表格(table)数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中,“原生js table表格自动排序效果”提供了一个无需依赖任何外部库(如jQuery...
4. **动态交互**:为了使用户体验更好,可以添加更多的交互功能,比如禁用删除按钮,或者在添加行时自动填充数据。这可以通过检查特定条件或使用`addEventListener`来实现。 5. **性能优化**:在处理大量数据时,应...
在IT行业中,尤其是在网页开发和前端交互设计领域,表格(Table)是常用的数据展示和管理工具。本主题聚焦于使用jQuery库对HTML表格进行动态操作,包括添加、删减行,以及对单元格进行标记、修改和删除。jQuery是一...
同时,对于“自动删除行”,JavaScript同样监听“删除”按钮的点击事件,然后找到对应的行元素并从DOM(文档对象模型)中移除。 下面是一个简化的JavaScript示例,演示了如何实现这个功能: ```javascript // 获取...
总的来说,"Table自动生成列"是ASP.NET动态网页开发中的一个重要技能,它结合了服务器端编程和客户端脚本,以提供灵活的数据展示和用户交互。理解并掌握这一技巧,对于任何ASP.NET开发者来说都至关重要。
"table-rowspan表格自动合并单元格插件"是专为HTML表格设计的一种工具,它允许开发者通过简单的操作实现单元格的动态合并、添加和删除,极大地提升了用户界面的可读性和交互性。以下是对这个插件及相关知识点的详细...
本资源“Layui表格行添加编辑删除操作和保存数据代码.zip”包含了一个完整的示例,演示了如何在Layui表格中实现动态的行添加、编辑和删除功能,并且将这些操作与数据保存相结合。下面我们将详细探讨这些知识点。 ...
6. **行操作**:支持行选择、行编辑和删除等功能,增强了表格的交互性。 7. **扩展功能**:如行内编辑、固定列、自定义列头、导出数据(CSV、Excel、PDF等)以及列冻结等,可以通过添加扩展插件实现。 8. **响应式...
本文将介绍如何使用JavaScript实现对HTML表格中动态添加、删除和更新行(Row)的方法,这些操作能够帮助开发者更加灵活地管理表格数据。 首先,我们需要了解HTML中表格的基本结构。一个表格由多个`<table>`标签构成...
博文中的“多个demo”可能包含了不同的场景和交互方式,比如通过按钮触发增加或删除行,或者根据用户输入自动添加行等。这些示例可以帮助开发者理解不同情况下的实现方法。 6. **事件监听**: JavaScript可以监听...
标题“自动增加行的动态表格”指的是在网页中实现一种交互式表格,它能够自动添加新的行数据,这种功能在数据录入、管理或展示时非常有用。动态表格通常结合前端JavaScript库或者自定义脚本来实现,允许用户无须刷新...
本文将基于给定的脚本代码来详细介绍如何使用JavaScript(简称JS)实现动态添加、删除行以及对齐剩下的元素下标等功能。 #### 二、关键函数解析 ##### 1. `get_Element` 函数 该函数用于获取指定标签名的DOM元素...
EasyTable.js插件1.0是一款专为HTML页面前端表格布局设计的JavaScript工具,它旨在简化和优化网页中表格的创建和管理。在HTML中,表格的构建通常涉及大量繁琐的HTML标记,而EasyTable.js则通过提供简洁的API,使得...
在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...
1. **基本使用**:Bootstrap Table通过HTML标记和JavaScript插件实现,只需要在HTML中添加特定的class和data属性,然后引入js和css文件即可创建一个基础的表格。 2. **数据源**:Bootstrap Table支持多种数据源,...
10. **API控制**:通过 JavaScript API 和数据属性,可以实现表格的动态操作,如添加、删除、更新行数据。 为了使用这些功能,开发者需要在 HTML 中设置表格结构,并通过 JavaScript 进行初始化和配置。压缩包中的 ...