在JS表格中怎么删除一行（不是指定行，而是我表格中每行后面都有一个删除按钮，按其中一个按钮就删除那一行

Posted 2023-04-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在JS表格中怎么删除一行（不是指定行，而是我表格中每行后面都有一个删除按钮，按其中一个按钮就删除那一行相关的知识，希望对你有一定的参考价值。

<table><tbody>
<tr><td>1111</td><td><input type="button" value="删除" onclick="del(this)" /></td></tr>
<tr><td>2222</td><td><input type="button" value="删除" onclick="del(this)" /></td></tr>
<tr><td>3333</td><td><input type="button" value="删除" onclick="del(this)" /></td></tr>
</tbody></table>

<script type="text/javascript">
function del(obj)

var tr=obj.parentNode.parentNode;//得到按钮[obj]的父元素[td]的父元素[tr]
tr.parentNode.removeChild(tr);//从tr的父元素[tbody]移除tr

</script> 参考技术A 可以给每一个tr加一个id属性<tr id='a'><td></td></tr>，然后当点击删除的时候调用js方法delTr()
<script>
function delTr(id)
$("#a").remove();

</script>
对了，要加载jquery.js插件

JS中的DOM---表格对象

[表格对象]
1、 rows属性：返回表格中的所有行，是一个数组格式；
2、 insertRow(index): 在指定位置插入一行，index从0开始；后面括号里面的数字表示在第几行插入
3、 deleteRow(index): 删除指定的一行，index从0开始；

[行对象]
1、 cells属性：返回这一行中的所有单元格，是一个数组格式；
2、 rowIndex属性：返回这一行是表格中的第几行，从0开始；
3、 insertCell(index): 在这一行指定位置，插入一个单元格，index从0开始，index表示索引；
4、 deleteCell(index): 删除这一行的指定单元格，index从0开始

[单元格对象]
1、 cellIndex属性：返回这个单元格是本行的第几个，从0开始；
2、 innerText innerHTML align className

eg：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
　　.ccy {
　　　　text-align: center;
　　　　font-weight: bold;
　　　　color: red;
　　}
</style>
</head>
<body>
　　<table border="1" width="300">
　　　　<tr>
　　　　　　<td>书名</td>
　　　　　　<td>价格</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>看得见风景的房间</td>
　　　　　　<td>30</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>60个瞬间</td>
　　　　<td>32</td>
　　　　　　</tr>
　　</table>
　　<button onclick="addRow()">增加一行</button>
　　<button onclick="deleteSecondRow()">删除第二行</button>
　　<button onclick="changeTitleStyle()">修改标题样式</button>
　　<button onclick="copyLastRow()">复制最后一行</button>

</body>

<script>
　　　　/*HTML DOM 和 Core DOM的区别：
　　　　 HTML DOM在执行相关插入元素方法的同时创建了相应的元素。*/
　　function addRow() {
　　　　var table = document.getElementsByTagName("table")[0];
　　　　var tr = table.insertRow(1);
　　　　var td1 = tr.insertCell(0);
　　　　td1.innerHTML = "幸福从天而降";
　　　　var td2 = tr.insertCell(1);
　　　　td2.innerHTML = "¥30"
　　}
　　function deleteSecondRow() {
　　　　document.getElementsByTagName("table")[0].deleteRow(1);
　　}
　　function changeTitleStyle() {
　　　　document.getElementsByTagName("table")[0].rows[0].className = "ccy";