首页 > JS > JavaScript基础

Table deleteRow() 方法

JavaScript基础 2022-06-08 17:14:0713小码哥的IT人生shichen

Table deleteRow() 方法

HTML DOM Table 对象

定义和用法

deleteRow() 方法从表中删除规定索引处的行。

提示：请使用 insertRow() 创建和插入新行。

另请参阅：

HTML 参考手册：HTML <tr> 标签

实例

例子 1

删除表中的第一行：

document.getElementById("myTable").deleteRow(0);

完整实例：

 <!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<p>单击按钮可删除表格中的第一行。</p>
<table id="myTable">
  <tr>
    <td>单元格 1</td>
    <td>单元格 2</td>
  </tr>
  <tr>
    <td>单元格 3</td>
    <td>单元格 4</td>
  </tr>
</table>
<br>
<button onclick="myFunction()">试一试</button>
<script>
function myFunction() {
  document.getElementById("myTable").deleteRow(0);
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

例子 2

删除您单击的行：

 function deleteRow(r) {
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
}

完整实例：

 <!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td>行 1</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  </tr>
  <tr>
    <td>行 2</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  </tr>
  <tr>
    <td>行 3</td>
    <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  </tr>
</table>
<script>
function deleteRow(r) {
  var i = r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

例子 3

创建和删除行：

 function myCreateFunction() {
  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";
}
function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(0);
}

完整实例：

 <!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 onclick="myCreateFunction()">创建行</button>
<button onclick="myDeleteFunction()">删除行</button>
<script>
function myCreateFunction() {
  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";
}
function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(0);
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

语法

tableObject.deleteRow(index)

参数值

参数	描述
index	在 Firefox 和 Opera 中是必需的，在 IE、Chrome 和 Safari 中是可选的。整数，规定要删除的行的位置（从 0 开始）。值 0 导致第一行将被删除。也可以使用值 -1，这将导致最后一行被删除。如果省略此参数，deleteRow() 将在 IE 中删除最后一行，在 Chrome 和 Safari 中删除第一行。

参数

描述

index

在 Firefox 和 Opera 中是必需的，在 IE、Chrome 和 Safari 中是可选的。

整数，规定要删除的行的位置（从 0 开始）。

值 0 导致第一行将被删除。

也可以使用值 -1，这将导致最后一行被删除。

如果省略此参数，deleteRow() 将在 IE 中删除最后一行，在 Chrome 和 Safari 中删除第一行。

返回值：

无返回值。

浏览器支持

Chrome	Edge	Firefox	Safari	Opera
Chrome	Edge	Firefox	Safari	Opera
支持	支持	支持	支持	支持

HTML DOM Table 对象

上一篇Table deleteCaption() 方法下一篇Table deleteTFoot() 方法

小码哥的IT人生

Table deleteRow() 方法

Table deleteRow() 方法

定义和用法

另请参阅：

实例

例子 1

完整实例：

例子 2

完整实例：

例子 3

完整实例：

语法

参数值

返回值：

浏览器支持

tags标签云

JS栏目导航

最新文章

热门文章

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	table, td {
	border: 1px solid black;
	}
	</style>
	</head>
	<body>
	<p>单击按钮可删除表格中的第一行。</p>
	<table id="myTable">
	<tr>
	<td>单元格 1</td>
	<td>单元格 2</td>
	</tr>
	<tr>
	<td>单元格 3</td>
	<td>单元格 4</td>
	</tr>
	</table>
	<br>
	<button onclick="myFunction()">试一试</button>
	<script>
	function myFunction() {
	document.getElementById("myTable").deleteRow(0);
	}
	</script>
	</body>
	</html>

	function deleteRow(r) {
	var i = r.parentNode.parentNode.rowIndex;
	document.getElementById("myTable").deleteRow(i);
	}

	function myCreateFunction() {
	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";
	}
	function myDeleteFunction() {
	document.getElementById("myTable").deleteRow(0);
	}

Table deleteRow() 方法

Table deleteRow() 方法

定义和用法

另请参阅：

实例

例子 1

完整实例：

例子 2

完整实例：

例子 3

完整实例：

语法

参数值

返回值：

浏览器支持

相关阅读

tags标签云

JS栏目导航

最新文章

热门文章