HTML DOM insertCell() 方法

最新推荐文章于 2021-06-18 01:45:59 发布
最新推荐文章于 2021-06-18 01:45:59 发布
阅读量645 收藏 1
点赞数
分类专栏： PHP

定义和用法

insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。

语法

tablerowObject.insertCell(index)

返回值

一个 TableCell 对象，表示新创建并被插入的 <td> 元素。

说明

该方法将创建一个新的 <td> 元素，把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。

请注意，该方法只能插入 <td> 数据表元。若需要给行添加头表元，必须用 Document.createElement() 方法和 Node.insertBefore() 方法（或相关的方法）创建并插入一个 <th> 元素。

抛出

若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

实例

下面的例子在表格行中插入了一个单元格：

<html>
<head>
<script type="text/javascript">
function insCell()
  {
  var x=document.getElementById('tr2').insertCell(0)
  x.innerHTML="John"
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" οnclick="insCell()" value="Insert cell">

</body>
</html>
杨光-Terence_Yang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js插入行、列[insertRow()、insertCell()]
weixin_30820151的博客
05-06 1259
测试1 tableObj.insertRow(index)，在表格指定位置插入一个新行元素()，新行被插在index所在行之前。该方法的返回值是插入的新行。 如果一个表格有3行，index=0时插入第一行，index=3时插入最后一行，如图：(图_1)若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMExcept...
038HTML-DOM对象.doc
11-30
HTML-DOM 对象 HTML-DOM 对象是指在 HTML 文档中表示的对象，这些对象都是 Document 对象的一部分。它们可以用来表示 HTML 文档中的各个部分，如表格、行、单元格等。下面是 HTML-DOM 对象的详细介绍： 1. HTML ...
js动态添加表格数据使用insertRow和insertCell实现
12-03
效果图: 代码: js动态添加表格数据_2.html 代码如下: <!DOCTYPE html> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>js动态添加表格数据_2 使用insertRow和insertCell方法实现</title> [removed] var mailArr = [ { “title”: “一个c#问题”, “name
insertCell在IE，火狐，谷歌下
Francis.Hu--技术的巅峰
11-22 2773
今天在调整js的兼容性发现了insertCell的兼容性问题，现在具体说下： insertCell就是js动态向表格行插入列的操作，在IE、火狐下，先插先到，也就是从第0列开始依次后移。在谷歌下，是后来居上依次后推，比如你首次插入了insertCell，该列在第1列，接着又插入了一列，刚刚的那列就变成了第2列，依次后推，为了达到三个浏览器的兼容性，我们可以采用appendChild的方式进行操作
js的insertRow和insertCell用法
weixin_30359021的博客
09-13 933
js的insertRow(-1)和insertCell(-1) 增加最后一行和增加最后一列 js的insertRow(5)和insertCell(5) 第5行后增加一行和增加第5列后增加一列 转载于:https://www.cnblogs.com/amylis_chen/p/11516202.html...
javascript => insertRow insertCell deleteRow rowIndex 用法
姬豪杰的专栏
04-29 1674
<!-- function addrow() { var i = document.getElementById("table").rows.length; var newtable = document.getElementById("table");//can use getElementsByTagName var CopyTr =
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
10-26
`insertRow()`、`deleteRow()`、`insertCell()`和`deleteCell()`是四个关键的方法，它们允许开发者直接操纵`<table>`元素的结构。 首先，`insertRow()`方法用于在表格中插入新的行。它的语法是`tableObject....
谷歌浏览器 insertCell与appendChild的区别
09-06
// 使用insertCell方法 ... } function generatable1() { // 使用appendChild方法 ... } ``` 当页面加载时，`generatable`函数会被调用，其使用`insertCell`方法添加单元格，显示结果会与代码执行顺序...
DOM基础教程之使用DOM控制表格
09-03
在本教程中，我们将专注于如何使用DOM来控制HTML表格。 首先，DOM提供了`insertRow()`方法，它允许我们在表格中动态地插入新行。例如，在示例代码中，`document.getElementById("member").insertRow(2)`这行代码...
insertCell 设置样式
WilliamChang的专栏
02-18 6883
insertCell 设置样式
动态控制表格insertRow,insertCell()
caopeng777的专栏
11-22 1200
1.在已有的表格中动态添加一行，插入到最上方。并且在新插入行的每一列中插入text节点 事件 window.onload=function(){ var iTr = document.getElementById("member").insertRow(0); var iText = new Array(); iText[0] = document.createTextNode("
insertRow和insertCell
nestashen的专栏
09-25 1297
                        原来的1                原来的2                                原来的3            var getTb= document.getElementById("oTable");    var crTR = getTb.insertRow(); //行已经加完了，我们再加一个包含td和另
js的insertRow(-1)和insertCell(-1)
limuxia的专栏
10-28 6637
js的insertRow(-1)和insertCell(-1)实际上就是在table表格的行和列结尾插入行和列，而不必专门计算出行列数，但W3C标准说“若参数 index 小于 0 或大于等于行中的的表元数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常”
java insertrow_js动态添加表格数据使用insertRow和insertCell实现
weixin_36165152的博客
02-26 541
效果图:代码:js动态添加表格数据_2.htmljs动态添加表格数据_2 使用insertRow和insertCell方法实现var mailArr = [{ "title": "一个c#问题", "name": "张三", "date": "2014-03-21" },{ "title": "一个javascript问题", "name": "李四", "date": "2014-03-21" ...
用html向表格插入新行,js向table表格中插入添加新行和选择删除行
weixin_35347870的博客
06-18 895
js向table表格中插入添加新行和选择删除行-综合特效-网页特效-站长新动力-msxindl.com#tab{width:50%;}#tab td{height:2em;text-align:center;}js向table表格中插入添加新行和选择删除行。第1行第1列第1行第2列第1行第3列全(选/不选)var i=1,flag=true;var tab=document.getElementB...
点击按钮增加一行表格
热门推荐
聆听
12-26 2万+
点击按钮增加一行表格 做此功能我们要用到两个方法： insertRow()： insertRow() 方法用于在表格中的指定位置插入一个新行。 insertCell() ：insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 元素。 <%@ page language="java" contentType="text/html; char
insertRow()与insertCell()方法的运用
leejin_521的专栏
11-04 4918
insertRow()与insertCell()方法的运用 例子1： var count=1; function tt() { var obj = document.forms[0].getElementsByTagName("input"); if(count > 9 || obj[obj.length-1].value =="")    return alert("
js里的insertCell和appendChild的区别
yongyonglsy的专栏
06-13 228
最近被一个奇怪的脚本问题困扰了好长时间，今天终于将原因弄清楚了，而且这个经验的确值得总结一下。 insertCell是html里的，appendChild是dom里的，其实两者并没什么关联（我也不知道对不对，暂且就当它是这样吧~），但还是想把它们扯在一起说。 事情是这样的，公司开发有一个下拉框的控件，是根据用户输入的数据实时查询数据库，显示与输入内容相关的数据，类似于C/S下的Combo...
使用HTML DOM操作表格数据，用HTML DOM的相关方法完成增加一行和删除选中相应复选框的对应行的功能
最新发布
04-01
HTML DOM是一种操作HTML文档的API，可以通过它来操作HTML元素。对于表格数据的操作，可以利用HTML DOM提供的方法来实现。 下面是一个实现增加一行和删除选中相应复选框的对应行的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Table Manipulation</title> <script> function addRow() { var table = document.getElementById("myTable"); var row = table.insertRow(-1); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = "<input type='checkbox'>"; cell2.innerHTML = "New Row"; cell3.innerHTML = "New Data"; } function deleteRow() { var table = document.getElementById("myTable"); var rows = table.getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) { if (rows[i].getElementsByTagName("input")[0].checked) { table.deleteRow(i); i--; } } } </script> </head> <body> <table id="myTable" border="1"> <tr> <th>Select</th> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td><input type="checkbox"></td> <td>Data 1</td> <td>Data 2</td> </tr> <tr> <td><input type="checkbox"></td> <td>Data 3</td> <td>Data 4</td> </tr> </table> <br> <button onclick="addRow()">Add Row</button> <button onclick="deleteRow()">Delete Rows</button> </body> </html> ``` 在这个示例中，我们创建了一个表格，并在其中添加了两行数据。我们还创建了两个函数：addRow()和deleteRow()。addRow()函数可以通过insertRow()和insertCell()方法在表格的末尾添加一行，并在这一行的每个单元格中添加内容。deleteRow()函数可以通过getElementsByTagName()方法获取表格中所有的行，并使用deleteRow()方法删除选中的行。 通过这个示例，我们可以看到如何使用HTML DOM操作表格数据。我们可以使用类似的方法来实现其他操作，例如修改单元格内容或者移动行列等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值