HTML DOM deleteRow() 方法

最新推荐文章于 2021-05-24 08:02:46 发布
最新推荐文章于 2021-05-24 08:02:46 发布
阅读量2.7k 收藏
点赞数
分类专栏： DOM JavaScript HTML 文章标签： html button border function table 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vipxiaotian/article/details/5031185
版权
JavaScript 同时被 3 个专栏收录
53 篇文章 0 订阅
订阅专栏
HTML
12 篇文章 0 订阅
订阅专栏
DOM
4 篇文章 0 订阅
订阅专栏

http://www.w3school.com.cn/htmldom/met_table_deleterow.asp

定义和用法

deleteRow() 方法用于从表格删除指定位置的行。

语法

tableObject.deleteRow(index)

说明

参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。<thead> 和 <tfoot> 中的行与表中其它行一起编码。

例子

<html>
<head>
<script type="text/javascript">
function deleteRow(r)
  {
  var i=r.parentNode.parentNode.rowIndex
  document.getElementById('myTable').deleteRow(i)
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
  <td>Row 1</td>
  <td><input type="button" value="删除" οnclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="删除" οnclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="删除" οnclick="deleteRow(this)"></td>
</tr>
</table>

vipxiaotian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM（二）-10-(示例-删除表格的行和列)
wy_0928的博客
08-20 573
表格样式table.css代码 @CHARSET "UTF-8"; table{ border:##249bdb 1px solid; width:500px; border-collapse:collapse; } table td{ border:#249bdb 1px solid; padding:5px;/*td左边顶格*/ } 主程序代码 <!-- 添加新功
JavaScript实现表格添加和删除行
二木成林
10-18 2045
效果展示 添加 删除 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <input type="button" onclick="addRow();" value="添加"> <t...
4、web(js)：js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法
xushaozhang的专栏
02-15 2268
本文来自：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
明细表删除序号及name属性索引未刷新
疯狂的星光的专栏
05-05 399
//删除行  function deleteRow(e) {          if(!e){                 e = window.event.srcElement||arguments[0].target;             }             e = DocListFunc_GetParentByTagName("TR",e);
HTML&DOM; &DOM;
03-20
HTML&DOM; &DOM;
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
10-26
本篇文章主要介绍了javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法)需要的朋友可以过来参考下，希望对大家有所帮助
table insertRow、deleteRow定义和用法总结
09-04
主要对table insertRow、deleteRow定义和用法做下总结,需要的朋友可以参考下
JS实现从表格中动态删除指定行的方法
12-29
JS的表格对象有一个deleteRow方法用于删除表格中的指定行，只需要指定行号即可 <!DOCTYPE html> <html> <head> [removed] function deleteRow(r) { var i=r[removed][removed].rowIndex; document....
table对象中的insertRow与deleteRow使用示例
09-04
本文为大家介绍下table对象insertRow deleteRow的使用示例，适合新手朋友们
js学习之操作表格
独狼的博客
06-27 396
<html> <head> <title>操作表格</title> <meta charset="UTF-8"/> <!-- js操作表格学习: 1、删除行： 行对象.rowIndex//返回行对象的角标 表格对象.deleteRow(要删除的行对象的角标); 2、修改单元内容 单元格对象.innerHTML="新的内容"; 行对象.cells//返回当前行所有的单元
JS 案例 表格的操作
suiferq的博客
05-24 295
表格的操作 对表格完成如下操作： 1、表格隔行变色 2、鼠标移动上去变色 3、增加行 4、删除行 5、修改行 HTML代码片: <table id="tab"> <tr> <td>编号</td> <td>姓名</td> <td>操作</td> </tr> <tr> <td>001</td> <td&gt
deleteRow() 连续删除多行
标点符号
03-05 2329
    应用：删除表格选中的一行或多行。 html代码如下：   &lt;table &gt; &lt;tr&gt; &lt;td &gt;复选框&lt;/td&gt; &lt;td &gt;序号&lt;/td&gt; &lt;td &gt;代码&lt;/td&gt; &lt;td &gt;名称&lt;/td&gt; &lt
js 采用insertRow和deleteRow来添加和删除表格单元格
iteye_2933的博客
02-16 440
function addrow(obj,type){ // 表格添加行 var rowtypedata = [ [[1, ''], [1,'&lt;input type="text" class="txt" name="newcatorder[]" value="0" /&gt;', 'td25'], [5, '&lt;div&gt;&lt;input name=&quo
DeleteRow()
weixin_30344795的博客
12-29 938
功能：删除数据窗口控件中的指定行。 语法：dwcontrol.DeleteRow(row) 参数：row,long类型，指定要删除数据hang的行号。当row参数为0时，删除当前行。 返回值:Integer。函数执行成功时返回1，发生错误时函数返回-1。 用法：该函数从数据窗口主缓冲区中删除指定行。如果数据窗口不可更新，则被删除行从系统中清除；如果可以更新，则被删除行从主缓冲区移动到删除缓...
insertRow()和deleteRow()方法
崇尚狼性的专栏
11-13 6167
定义和用法deleteRow() 方法用于从表格删除指定位置的行。语法tableObject.deleteRow(index)说明参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。 和 中的行与表中其它行一起编码。     New Document             http://www.w3.org/TR/xh
HTML DOM Table对象insertRow()方法与deleteRow()方法
杰希默克的博客
09-27 1900
insertRow()方法insertRow()方法用于在表格中的指定位置插入一个新行。 语法：tableObj.insertRow(index) 返回值：返回一个TableRow，表示新插入的行。 说明：该方法创建一个新的TableRow对象，表示一个新的<tr>标记，并把它插入表中的指定位置。新行将被插入index所在行之前。 提示：可以使用TableRow.insertCell()方法
3、制作HTML页面,页面显示表格数据,使用DOM操作增加或者删除表格行
最新发布
05-27
好的，这是一个关于HTML页面和DOM操作的问题。为了回答这个问题，我需要提供一些基本的HTML和JavaScript代码。以下是一个简单的示例，展示如何创建一个表格，并使用DOM操作添加或删除表格行： HTML代码： ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>Male</td> </tr> <tr> <td>Jane</td> <td>30</td> <td>Female</td> </tr> </tbody> </table> <button id="addRow">Add Row</button> <button id="deleteRow">Delete Row</button> ``` JavaScript代码： ```javascript // 获取表格和按钮元素 var table = document.getElementById("myTable"); var addBtn = document.getElementById("addRow"); var delBtn = document.getElementById("deleteRow"); // 添加行 addBtn.addEventListener("click", function() { // 创建新行和单元格 var newRow = document.createElement("tr"); var nameCell = document.createElement("td"); var ageCell = document.createElement("td"); var genderCell = document.createElement("td"); // 添加单元格内容 nameCell.innerText = "New Name"; ageCell.innerText = "New Age"; genderCell.innerText = "New Gender"; // 将单元格添加到新行中 newRow.appendChild(nameCell); newRow.appendChild(ageCell); newRow.appendChild(genderCell); // 将新行添加到表格中 table.appendChild(newRow); }); // 删除行 delBtn.addEventListener("click", function() { // 获取表格中最后一行 var lastRow = table.rows[table.rows.length - 1]; // 如果表格不为空，删除最后一行 if (lastRow) { table.deleteRow(-1); } }); ``` 以上代码演示了如何使用DOM操作增加或删除表格行。当用户点击“Add Row”按钮时，会新建一行，并将其添加到表格中。当用户点击“Delete Row”按钮时，会删除表格中的最后一行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值