动态添加删除表格行的js脚本

最新推荐文章于 2024-02-27 22:01:19 发布
最新推荐文章于 2024-02-27 22:01:19 发布
阅读量291 收藏
点赞数
文章标签： javascript ViewUI

<html>
<head>
<script language="javascript">
//窗口表格增加一行
function addNewRow(){
var tabObj=document.getElementById("myTab");//获取添加数据的表格
var rowsNum = tabObj.rows.length; //获取当前行数
var colsNum=tabObj.rows[rowsNum-1].cells.length;//获取行的列数
var myNewRow = tabObj.insertRow(rowsNum);//插入新行
var newTdObj1=myNewRow.insertCell(0);
newTdObj1.innerHTML="<input type='checkbox' name='chkArr' id='chkArr'"+rowsNum+" style='width:20px' />";
var newTdObj2=myNewRow.insertCell(1);
newTdObj2.innerHTML="<input type='text' name='nodecode' id='nodecode'"+rowsNum+" style='width:40px' value='"+rowsNum+"'/>";
var newTdObj3=myNewRow.insertCell(2);
newTdObj3.innerHTML="<input type='text' name='nodename' id='nodename'"+rowsNum+" style='width:120px' />";
var newTdObj4=myNewRow.insertCell(3);
newTdObj4.innerHTML="<input type='text' name='nodeper' id='nodeper'"+rowsNum+" style='width:60px' />";
}
//窗口表格删除一行
function removeRow(){
var chkObj=document.getElementsByName("chkArr");
var tabObj=document.getElementById("myTab");
for(var k=0;k<chkObj.length;k++){
if(chkObj[k].checked){
tabObj.deleteRow(k+1);
k=-1;
}
}
}
</script>
</head>
<body>
<input type="button" name="xx" οnclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" οnclick="removeRow();" value="删除一行" />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
<tr>
<td width="40px" class="top-bt liebiao-c" align="center" >操作</td>
<td width="40px" class="top-bt liebiao-c" align="center" >序号</td>
<td class="top-bt liebiao-c" align="center" >节点名称</td>
<td width="80px" class="top-bt liebiao-c" align="center" >节点比例</td>
</tr>
</table>
</body>
</html>

iteye_3606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于JavaScript实现动态添加删除表格的行
10-22
本文将详细介绍如何使用JavaScript实现动态添加和删除表格的行。在实际应用中，这样的功能常见于数据输入表单或者管理界面，用户可以根据需求增删表格行，方便数据的管理。 首先，我们来看HTML部分。一个简单的表格...
纯JS table动态增加行
Everyone_boy的博客
08-21 7864
JS代码： function addRow(tableId) { var tb=document.getElementById(tableId); var tbRows=tb.rows; var newTr=tb.insertRow(tbRows.length); newTr.align="center"; var newTd0=newTr.insertCell(0); var newTd1=newTr.insertCell(1); var newTd2=newTr.insertCel
表单通过JS新增加一行
qq_42591048的博客
07-28 1150
title> 增加行
JS + HTML 表格动态添加一行
qq_44490330的博客
08-11 8045
JS + HTML 表格动态添加一行 一、使用innerHTML对表格进行添加一行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 50px; } a{
JavaScript点击事件实现增加一行表格
爱酷码的博客
12-28 4851
题目 操作表格，每点击一次添加，就在表格中生成一行 代码如下 <body> <table border="1" cellpadding=""> <thead> <tr> <td>用户名</td> <td>密码</t...
js、table表格 插入、新增、删除自定义行
qiang928的博客
11-19 2350
js、table表格 插入、新增、删除自定义行
动态添加删除表格行的js实现代码
12-10
在网页开发中，动态添加和删除表格行是一个常见的需求，特别是在数据输入或管理界面中。JavaScript（js）作为客户端脚本语言，可以很好地处理这种交互式功能。在给出的示例代码中，主要展示了如何使用JavaScript来...
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...
动态添加/删除表格行并提交内容到后台
07-19
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
javascript实现动态增加删除表格行(兼容IE/FF)
10-30
### JavaScript 实现动态增加删除表格行（兼容 IE/FF） #### 概述 在 Web 开发中，动态地增加或删除表格行是一项常见的需求。这项技术可以极大地提高用户体验，使得用户能够根据自己的需要来调整表格内容。本文将...
js在当前表格中点击按钮新增一行的操作
CyrilのJava世界
05-21 6335
【代码】js在当前表格中点击按钮新增一行的操作。
原生js实现可添加、删除的行
yin_953280563的博客
12-28 419
原生js实现可添加、删除的行 前端萌新学习笔记，不喜勿喷。 首先你需要一个乘放可编辑行的容器，可能它长下面这样，也可能不长这样 <div class="container"></div> 初始化方法时需要给容器添加一行 function init(){ //获取容器dom节点，添加行 } init(); 新增一行时，需要向点击的span的父元素后添加一...
如何使用JavaScript实现一个简单的动态表格，实现添加一行和删除一行表格（两种方法）
m0_64053511的博客
02-08 8683
1方法一： 使用table的insertRow()方法插入一行，使用table.removeChild(tr)删除一行，具体的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ text-align: c.
js如何动态添加表格行
热门推荐
weixin_42630877的博客
10-15 1万+
一、总结 方法一：添加可通过在table的innerHTML属性中添加tr和td来实现 方法二：通过table的属性insertRow()，deleteRow()来实现 方法一和方法二对比： 二、js如何实现动态的在表格中添加和删除行？ 1、插入删除行案例说明 2、用到table相关的属性和方法 三、代码   &gt;  一、总结（点击显示或隐藏总结内容） 1、ta...
js动态添加和删除一行
bbqk9的专栏
08-21 1万+
添加表格信息
【javascript】 html使用javascript 向表格中插入一行
口袋里的小龙的专栏
07-25 2387
html使用javascript 向表格中插入一行
要在Javascript中实现表格新增行功能，且添加元素，增删操作
最新发布
qq_58341172的博客
02-27 1096
获取表格元素。创建一个新的表格行（）元素。根据需要创建表格单元格（）元素，并将它们添加到新创建的表格行中。将新创建的表格行添加到表格中。是一个用于在 HTML 表格中插入新行的方法。它args接受一个参数，表示要插入新行的索引位置。如果参数为负数，则新行将插入到表格的末尾。例子：insertRow(-1) 则新行将插入到表格的末尾。
使用js为表格添加一行
datai3890的博客
07-08 1101
今天同事问了我一个问题，为表格添加新的行，我用的js写了一下，代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> ...
js给表格增加一行总结
ql0722的专栏
10-18 415
大概看了一下网上对表格增加一行的ｊｓ方法，基本上有两个方法 其中用到的childNodes方法在IE下与火狐下得到的DOM不同，table节点下均有tbody节点，但是IE获得tbody为表格Dom.childNodes[0], 火狐获得tbody为表格Dom.childNodes[1]。故需要两种写法 方法一 function addRow1(){ var myTab = ...
在HTML文档中引入JQeury和JavaScript脚本，实现动态生成添加修改删除表格案例。
05-29
好的，我可以为您提供相关的代码示例。首先，请确保在HTML文档中正确引入jQuery和JavaScript脚本，如下所示： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态生成表格</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <table id="myTable"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>18</td> <td><button class="edit">编辑</button><button class="delete">删除</button></td> </tr> <tr> <td>2</td> <td>李四</td> <td>20</td> <td><button class="edit">编辑</button><button class="delete">删除</button></td> </tr> </tbody> </table> <button id="addRow">添加一行</button> </body> </html> ``` 其中，`<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>`是引入jQuery库的代码，`<script src="script.js"></script>`是引入JavaScript脚本的代码，`<table id="myTable">`是我们要动态生成的表格的标签。 接下来，我们来看一下`script.js`文件的代码： ```javascript $(document).ready(function() { // 编辑按钮的点击事件 $(document).on("click", ".edit", function() { var row = $(this).closest("tr"); var id = row.find("td:eq(0)").text(); var name = row.find("td:eq(1)").text(); var age = row.find("td:eq(2)").text(); var new_name = prompt("请输入姓名", name); var new_age = prompt("请输入年龄", age); if (new_name != null && new_age != null) { row.find("td:eq(1)").text(new_name); row.find("td:eq(2)").text(new_age); } }); // 删除按钮的点击事件 $(document).on("click", ".delete", function() { $(this).closest("tr").remove(); }); // 添加一行按钮的点击事件 $("#addRow").click(function() { var id = $("#myTable tbody tr:last-child td:first-child").text(); if (id == "") { id = 1; } else { id = parseInt(id) + 1; } var name = prompt("请输入姓名", ""); var age = prompt("请输入年龄", ""); if (name != null && age != null) { var newRow = "<tr><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td><button class='edit'>编辑</button><button class='delete'>删除</button></td></tr>"; $("#myTable tbody").append(newRow); } }); }); ``` 这段代码实现了编辑、删除和添加一行按钮的点击事件。具体来说，当用户点击编辑按钮时，会弹出一个对话框，让用户输入新的姓名和年龄，然后更新表格中对应的单元格；当用户点击删除按钮时，会删除该行数据；当用户点击添加一行按钮时，会弹出一个对话框，让用户输入新的姓名和年龄，然后在表格的最后一行添加一条新的数据。 以上就是动态生成添加修改删除表格的代码示例，希望能对您有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值