function deleteRow(btn) { var row = btn. parentNode . parentNode ;row. parentNode . removeChild( row);详细解释
时间: 2024-04-05 10:29:55 浏览: 200
这是一个 JavaScript 函数,用于删除 HTML 表格中的行。它的参数 btn 是一个指向触发删除的按钮元素的引用。
第一行代码获取该按钮所在的行元素。btn.parentNode 获取按钮的父节点,即该行所在的元素;再调用 parentNode 获取该元素的父节点,即整个表格的 tbody 元素。因此,row 变量引用了要删除的行元素。
第二行代码调用 parentNode 方法获取要删除的行元素的父节点,即 tbody 元素,并调用 removeChild 方法删除该行元素。这会从 DOM 中完全移除该元素。
因此,该函数的作用是删除 HTML 表格中的一行,并同步更新 DOM。
相关问题
h1>学生信息表格</h1> <form class="info" autocomplete="off"> 姓名:<input type="text" class="uname" name="uname" /> 科目<input type="text" class="subject" name="subject" /> 成绩:<input type="text" class="score" name="score" /> <button class="add">录入</button> </form> <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> var data = [{ uname: '张三', subject: 'JavaScript', score: 100 }, { uname: '李四', subject: 'JavaScript', score: 90 }, { uname: '刘五', subject: 'JavaScript', score: 90 }]; var tbody = document.querySelector('tbody'); for (var i = 0; i < data.length; i++) { var tr = document.createElement('tr'); tbody.appendChild(tr); for (var k in data[i]) { var td = document.createElement('td'); td.innerHTML = data[i][k]; tr.appendChild(td); } var td = document.createElement('td'); td.innerHTML = '<a href="javascript:;">删除 </a>'; tr.appendChild(td); var td = document.createElement('td'); td.innerHTML = <tr> <td> <button onclick="moveUp(this)">上移</button> <button onclick="moveDown(this)">下移</button> </td> </tr>; tr.appendChild(td); } var uname = document.querySelector('.uname'); var subject = document.querySelector('.subject'); var score = document.querySelector('.score'); var info = document.querySelector('.info'); var tbody = document.querySelector('tbody'); var arr = []; info.addEventListener('submit', function (e) { e.preventDefault(); var obj = { uname: uname.value, subject: subject.value, score: score.value, } arr.push(obj); this.reset(); for (var i = 0; i < arr.length; i++) { var tr = document.createElement('tr'); tr.innerHTML = <td>${arr[i].uname}</td> <td>${arr[i].subject}</td> <td>${arr[i].score}</td> <td> <a href="javascript:;">删除 </a></td> <td> <button onclick="moveUp(this)">上移</button> <button onclick="moveDown(this)">下移</button> </td> ; } tbody.appendChild(tr); }) var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function() { tbody.removeChild(this.parentNode.parentNode) } function moveUp(btn) { var row = btn.parentNode.parentNode; var prevRow = row.previousElementSibling; if (prevRow) { row.parentNode.insertBefore(row, prevRow); } else { row.parentNode.appendChild(row); } } } function moveDown(btn) { var row = btn.parentNode.parentNode; var nextRow = row.nextElementSibling; if (nextRow) { row.parentNode.insertBefore(nextRow, row); } else { var firstRow = row.parentNode.firstElementChild; row.parentNode.insertBefore(row, firstRow); } } </script>怎么用数组索引上下移动行
这段代码中已经定义了两个函数`moveUp`和`moveDown`,分别用于上移和下移行。在HTML中,通过给上移和下移按钮添加`onclick`事件来调用这两个函数。如果你想要通过数组索引来移动行,可以将`arr`数组中的元素按照需要的顺序重新排列,然后重新渲染整个表格。具体实现方法可以参考以下代码:
```
function moveUp(index) {
if (index > 0) {
var temp = arr[index];
arr[index] = arr[index - 1];
arr[index - 1] = temp;
renderTable();
}
}
function moveDown(index) {
if (index < arr.length - 1) {
var temp = arr[index];
arr[index] = arr[index + 1];
arr[index + 1] = temp;
renderTable();
}
}
function renderTable() {
tbody.innerHTML = '';
for (var i = 0; i < arr.length; i++) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + arr[i].uname + '</td>' +
'<td>' + arr[i].subject + '</td>' +
'<td>' + arr[i].score + '</td>' +
'<td><a href="javascript:;" onclick="deleteRow(' + i + ')">删除</a></td>' +
'<td><button onclick="moveUp(' + i + ')">上移</button> <button onclick="moveDown(' + i + ')">下移</button></td>';
tbody.appendChild(tr);
}
}
function deleteRow(index) {
arr.splice(index, 1);
renderTable();
}
```
这里新增了一个`renderTable`函数,用于重新渲染整个表格。在上移和下移函数中,先通过传入的索引交换数组元素的位置,然后调用`renderTable`函数重新渲染整个表格。同时,为了让每行删除按钮的`onclick`事件也能正确删除对应的数据,需要将数组索引作为参数传入`deleteRow`函数。
写一段html代码,完成如下效果,点击“删除”后,会把当前表格行删除。 提示:要删除一个结点的方法为:结点对象名.remove(); this代表的是当前发生事件的结点。获取当前结点的父节点的方法为:结点对象名.parentNode
好的,以下是一个简单的HTML代码示例,可以实现删除表格行的功能:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Delete Table Row with HTML</title>
</head>
<body>
<h2>Delete Table Row with HTML</h2>
<table id="myTable">
<tr>
<th>Name</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Jane Doe</td>
<td>25</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Bob Smith</td>
<td>40</td>
<td><button onclick="deleteRow(this)">Delete</button></td>
</tr>
</table>
<script>
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</body>
</html>
```
在这个示例中,我们创建了一个简单的表格,并为每行添加了一个“删除”按钮。当点击这个按钮时,会调用名为“deleteRow”的JavaScript函数。这个函数获取按钮所在的表格行,然后通过父节点的removeChild方法删除该行。注意,我们在按钮的HTML代码中使用了“this”关键字,这样就可以将按钮本身作为参数传递给JavaScript函数,从而获取到按钮所在的行。
阅读全文