TableRow insertCell() 方法
TableRow insertCell() 方法
实例
例子 1
在 id="myRow" 的表格行的开头插入包含内容的新单元格：
var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "New cell";
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击该按钮可在表格行的开头插入新单元格。</p>
<table>
<tr id="myRow">
<td>第一单元格</td>
<td>第二单元格</td>
<td>第三单元格</td>
</tr>
</table><br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var row = document.getElementById("myRow");
var x = row.insertCell(0);
x.innerHTML = "新的单元格";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方提供更多实例。
语法
tablerowObject.insertCell(index)
| 参数 | 描述 |
|---|---|
| index |
在 Firefox 和 Opera 中是必需的，在 IE、Chrome 和 Safari 中是可选的。 数值（从 0 开始），规定新单元格在当前行中的位置。 值 0 将导致新单元格插到第一个位置。也可以使用 -1 的值，这将导致新单元格插入到最后一个位置。 如果省略此参数，在 IE 中 insertCell() 将在最后一个位置、在 Chrome 和 Safari 中将在第一个位置插入新单元格。 |
技术细节
返回值：
插入的单元格元素。
浏览器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
更多实例
例子 2
在 id="myRow" 的表格行末尾插入包含内容的新单元格：
var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "New cell";
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击该按钮可在表格行的末尾插入新单元格。</p>
<table>
<tr id="myRow">
<td>第一单元格</td>
<td>第二单元格</td>
<td>第三单元格</td>
</tr>
</table><br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var row = document.getElementById("myRow");
var x = row.insertCell(-1);
x.innerHTML = "新的单元格";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 3
在 id="myRow" 的表格行的索引位置 2 处插入包含内容的新单元格：
var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "New cell";
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击该按钮可在表格行的索引位置 2 处插入新单元格。</p>
<table>
<tr id="myRow">
<td>第一个单元格（索引 0）</td>
<td>第二个单元格（索引 1）</td>
<td>第三个单元格（索引 2）</td>
</tr>
</table><br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var row = document.getElementById("myRow");
var x = row.insertCell(2);
x.innerHTML = "新的单元格";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 4
在第一个表格行的开头插入新单元格。表的 rows 集合 (.rows[0]) 返回表中 id 为 "myTable" 的所有 <tr> 元素的集合。
数字 [0] 规定要检索的元素，在此例中，是第一个表格行。然后我们使用 insertcell() 在索引位置 -1 插入新的单元格：
var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(-1);
x.innerHTML = "New cell";
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击该按钮可在第一个表格行的开头插入新单元格。</p>
<table id="myTable">
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
<td>第三个单元格</td>
</tr>
<tr>
<td>第一个单元格</td>
<td>第二个单元格</td>
<td>第三个单元格</td>
</tr>
</table><br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var firstRow = document.getElementById("myTable").rows[0];
var x = firstRow.insertCell(0);
x.innerHTML = "新的单元格";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 5
从 id="myRow" 的表行中删除第一个单元格：
var row = document.getElementById("myRow");
row.deleteCell(0);
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击此按钮可从表格行中删除第一个单元格。</p>
<table>
<tr id="myRow">
<td>第一个单元格</td>
<td>第二个单元格</td>
<td>第三个单元格</td>
</tr>
</table><br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var row = document.getElementById("myRow");
row.deleteCell(0);
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
例子 6
在表的开头插入新行。
insertRow() 方法在表中的规定索引处插入新行，在此例中，为 id="myTable" 的表的第一个位置（开头）。
然后我们使用 insertCell() 方法在新行中添加单元格。
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>单击按钮在表格的第一个位置添加一个新行，然后添加单元格和内容。</p>
<table id="myTable">
<tr>
<td>行 1 单元格 1</td>
<td>行 1 单元格 2</td>
</tr>
<tr>
<td>行 2 单元格 1</td>
<td>行 2 单元格 2</td>
</tr>
<tr>
<td>行 3 单元格 1</td>
<td>行 3 单元格 2</td>
</tr>
</table>
<br>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "新单元格 1";
cell2.innerHTML = "新单元格 2";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
