function moveUp(obj) { var tr = obj.parentNode.parentNode; var tbody = tr.parentNode; if (tr.rowIndex === 1) { // 如果当前行是第一行，将其移动到最后一行 tbody.insertBefore(tr, tbody.lastChild.nextSibling); } 类似这段代码的删除代码

如果想要在这段代码中添加删除功能，可以使用以下代码：

function deleteRow(obj) {
  var tr = obj.parentNode.parentNode;
  var tbody = tr.parentNode;
  tbody.removeChild(tr);
}

这个函数将删除传递给它的行。使用这个函数，可以将一个删除按钮添加到每一行中：

<tr>
  <td>...</td>
  <td>...</td>
  <td><button onclick="deleteRow(this)">删除</button></td>
</tr>

这个按钮将调用deleteRow函数，并将当前行作为参数传递给它。当函数被调用时，它将删除这一行。

相关问题

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`函数。

<tr> <td>1</td> <td>nxy</td> <td>女</td> <td> <a href="Javascript:void(0);" onclick="delTr()">删除</a> </td> </tr> <script> function delTr(obj) { var tr = obj.parentNode.parentNode; var table = tr.parentNode; document.getElementsByTagName("table")[0].removeChild(tr); } </script> 代码哪里有错，请改正

这段代码中的 delTr 函数没有传入参数，所以在调用该函数时会导致错误。应该将 onclick 事件绑定的函数修改为 `delTr(this)`，并且将参数 obj 加入函数中，代码如下：

<tr>
    <td>1</td>
    <td>nxy</td>
    <td>女</td>
    <td>
        <a href="Javascript:void(0);" onclick="delTr(this)">删除</a>
    </td>
</tr>
<script>
    function delTr(obj) {
        var tr = obj.parentNode.parentNode;
        var table = tr.parentNode;
        table.removeChild(tr);
    }
</script>

同时，由于该代码中只有一张表格，可以直接使用 `document.getElementsByTagName("table")[0]` 来获取第一张表格，而不需要使用变量 `table`。