javascript => insertRow insertCell deleteRow rowIndex 用法

最新推荐文章于 2017-02-15 20:54:59 发布
原创 最新推荐文章于 2017-02-15 20:54:59 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #table #delete #button #border #function

本文介绍了一种使用JavaScript来实现HTML表格的动态增删行的方法。通过insertRow(i)和deleteRow(i)方法，可以轻松地在指定位置添加或删除表格行。此外，还提供了具体的示例代码帮助理解。

 

insertRow(i) ：方法可用来往表格中的指定位置上插入新行 

      把新行插入表格第i 行之上 i从0开始计算 （表格的第一行 为第0行） 如果i等于表格总行数 则插入最后一行

insertCell(i）：在行中插入1列  方法同 insertRow（i）

deleteRow(i) :删除 表格中的第i行 i从0开始算起

rowIndex : 返回某一行在表格中行集合的位置

获取table中的rowIndex和cellIndex
01-19
在IECN里有朋友问起怎么获取表格中某个单元格的行号与列号，可以用rowIndex和cellIndex来获取． 具体效果请看下面的代码 获取table中的rowIndex和cellIndex 行1列１ 行1列２ 行1列3 行2列１ 行2列２ 行2列3 行3列１ 行3列２ 行3列3 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js的insertRow和insertCell用法
weixin_30359021的博客
09-13 1029
js的insertRow(-1)和insertCell(-1) 增加最后一行和增加最后一列 js的insertRow(5)和insertCell(5) 第5行后增加一行和增加第5列后增加一列 转载于:https://www.cnblogs.com/amylis_chen/p/11516202.html...
javascript添加、删除行；insertRow/deleteRow/insertCell
zhy4013的专栏
07-08 459
  <html> <head> <script type="text/javascript"> function addRow(){ var newTr = document.getElementById("peopleTable").insertRow(); var newTd0 = newTr.insertCell(); var n...
javascript 动态创建表格
DB2菜鸟的专栏
11-24 1221
关键字: javascript 动态创建表格 利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。 1、inserRow()和insertCell()函数 insertRow()函数可以带参数，形式如下： insertRow(index)：ind
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
mengzhengjie的专栏
02-11 1352
http://www.jb51.net/article/44476.htm 本篇文章主要介绍了javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法)需要的朋友可以过来参考下，希望对大家有所帮助 insertRow() 方法 定义和用法 insertRow() 方法用于在
javascript操作table（insertRow()，deleteRow()，insertCell()，deleteCell()方法）
fox123871的专栏
08-11 2133
insertRow() 方法 定义和用法 insertRow() 方法用于在表格中的指定位置插入一个新行。 语法 tableObject.insertRow(index) 返回值 返回一个 TableRow，表示新插入的行。 说明 该方法创建一个新的 Tab
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态生成表格</title> <style> table { border-collapse: collapse; width: 100%; } table, th, td { border: 1px solid black; } </style> </head> <body> <form> <label for="name">请输入姓名:</label> <input type="text" id="name" name="name" required><br> <label for="email">请输入邮箱:</label> <input type="email" id="email" name="email" required><br> <input type="button" value="添加" onclick="addRow()"> </form> <table id="studentTable"> <thead> <tr> <th>姓名</th> <th>邮箱</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> function addRow() { // 获取输入框的值 let name = document.getElementById('name').value; let email = document.getElementById('email').value; // 获取表格的tbody元素 let tableBody = document.getElementById('studentTable').getElementsByTagName('tbody')[0]; // 创建新的行 let newRow = tableBody.insertRow(); // 创建姓名单元格并填充内容 let nameCell = newRow.insertCell(0); nameCell.textContent = name; // 创建邮箱单元格并填充内容 let emailCell = newRow.insertCell(1); emailCell.textContent = email; // 创建操作单元格并添加删除链接 let actionCell = newRow.insertCell(2); let deleteLink = document.createElement('a'); deleteLink.href = "#"; deleteLink.textContent = "删除"; // 使用箭头函数确保正确的作用域，获取当前行索引并删除行 deleteLink.addEventListener('click', (e) => { e.preventDefault(); // 阻止默认的跳转行为 let rowIndex = newRow.rowIndex; tableBody.deleteRow(rowIndex); }); actionCell.appendChild(deleteLink); // 清空输入框 document.getElementById('name').value = ''; document.getElementById('email').value = ''; } </script> </body> </html> 这个代码的删除点击无法删除该行索引对应的数据，帮我改一下，给我一个整的html代码
05-14
deleteLink.addEventListener('click', (e) => { e.preventDefault(); // 阻止默认的跳转行为 let row = e.target.parentElement.parentElement; // 找到当前行 row.parentNode.removeChild(row); // 删除当前行...
JavaScript表格操作实战：appendChild与insertRow/insertCell技巧
类似地，`insertCell()`函数用于在行中插入单元格，其用法与`insertRow()`一致，这里不再赘述。 删除表格元素时，`deleteRow()`和`deleteCell()`方法派上用场。`deleteRow(index)`用于删除指定行，同样需要传递行的...
这行代码什么意思 mybutton.onclick = function () { // 获取当前按钮所在行的索引 var rowIndex = this.parentNode.parentNode.rowIndex; table.deleteRow(rowIndex); }
最新发布
11-29
- `deleteRow(rowIndex)`：`deleteRow` 是表格元素的一个方法，用于删除指定索引的行。将 `rowIndex` 作为参数传递给该方法，即可删除当前按钮所在的行。 ### 示例代码 ```html <!DOCTYPE html> <html lang="en"> ...
改错，不改变源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>添加联系人</title> </head> <style> h3{ text-align: center; } table,form{ width: 400px; margin: 0 auto; } table,th,td{ border: 1px solid gray; border-collapse: collapse; } </style> <body> <h3>联系人表格</h3> <table> <tr> <th>姓名</th> <th>联系地址</th> <th>邮政编码</th> <th>操作</th> </tr> <tr> <td>王小品</td> <td>商学院</td> <td>110104</td> <td><button>删除</button></td> </tr> </table> <hr> <form action=""> <p> <label for="username">姓名：</label> <input type="text" id="username"> </p> <p> <label for="address">联系地址：</label> <input type="text" id="address"> </p> <p> <label for="postcode">邮政编码：</label> <input type="text" id="postcode"> </p> <p> <input type="button" id="btn" value="添加联系人"> <input type="reset" value="重置"> </p> </form> <script> document.getElementById("btn").onclick=function(){ var username=document.getElementById("username").value; var address=document.getElementById("address").value; var postcode=document.getElementById("postcode").value; var table=document.querySelector("table"); var tr=table.insertRow(); tr.insertCell(0).textContent=username; tr.insertCell(1).textContent=address; tr.insertCell(2).textContent=postcode; var mybutton=document.createElement("button"); mybutton.className="del"; mybutton.innerHTML="删除"; tr.insertCell(3).appendChild(mybutton); mybutton.onclick=function(){ table.deleteRow() } } </script> </body> </html>
11-29
4. **JavaScript删除行问题**：`table.deleteRow()` 缺少参数，需要传入要删除行的索引。 ### 改正后的代码 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
javascript中insertRow(index) 和insertCell(index)
kbx8916的博客
09-24 1233
js中的 tableObject.insertRow(index) 和 tablerow.insertCell(index) 函数用于向表格中添加行和单元格 eg function myfunc() { try { var x=document.getElementById("tb").insertRow(-1); } catch(e) { alert("the
4、web(js)：js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
xushaozhang的专栏
02-15 2552
本文来自：http://www.cnblogs.com/dongxizhen/archive/2013/01/11/2856229.html 表格有几行: var trCnt = table.rows.length;  (table为Id ) 每行有几列：for (var i=0; i   javascript操作table:     insertRow()，deleteR
HTML DOM insertCell() 方法
杨光的技术收集站
08-26 757
定义和用法 insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 元素。 语法 tablerowObject.insertCell(index) 返回值 一个 TableCell 对象，表示新创建并被插入的 元素。 说明 该方法将创建一个新的 元素，把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 in
js的insertRow(-1)和insertCell(-1)
limuxia的专栏
10-28 6818
js的insertRow(-1)和insertCell(-1)实际上就是在table表格的行和列结尾插入行和列，而不必专门计算出行列数，但W3C标准说“若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常”
HTML DOM rowIndex 属性
yanleigis的专栏
10-14 1174
  HTML DOM rowIndex 属性返回 HTML DOM Tablerow 对象参考手册定义和用法rowIndex 属性返回某一行在表格的行集合中的位置（row index）。语法tablerowObject.rowIndex实例下面的例子返回了某一行在表格中的位置：function alertRowIndex()  {  alert(docu
表格对象insertRow、deleteRow方法和表格行对象的rowIndex属性和
weixin_34302798的博客
11-25 869
表格对象insertRow、deleteRow方法和表格行对象的rowIndex属性和insertCell方法的应用 一、表格对象的insertRow、deleteRow方法： 1、 insertRow方法 功能：在表格中的指定位置插入一个新行，返回一个tableRow，表示新插入的行 语法： tableObject.insertRow(index) 参数说明：...
grid1.DataKeys[e.RowIndex].Value.ToString()的用法诠释
mobingdetong的专栏
04-23 883
e.Row.RowType == DataControlRowType.DataRow诠释（实例解释） 代码语句如下：  protected void OnRowCreate(object sender, GridViewRowEventArgs e)     {         if (e.Row.RowType == DataControlRowType.DataRow)    
js在insertRow里面触发事件的方法
吃饭穿衣靠Java
10-10 2697
最近很多人在问这个问题，就随便简单做了一个 for(var i=0;iarr.length;i++)...{//随便一个循环生成动态table            var header=tab.createTHead();            var row=header.insertRow();            var cell=row.insertCell();     
table的 rowIndex 属性
笨鸟快飞的专栏
08-24 4655
rowIndex 属性返回某一行在表格的行集合中的位置（row index）。 语法 tablerowObject.rowIndex 实例 下面的例子返回了某一行在表格中的位置： function alertRowIndex() { alert(document.getElementById("tr1").rowIndex); }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值