Question

我正在尝试删除代码中添加行函数中最后插入的行。有人可以向我解释为什么删除功能代码不起作用吗？这是代码。我是编码的新手，所以请不要害我。我有一个理论，我应该获取表行元素，并使用负一作为其参数。

function addRow() {
  var getTable = document.getElementById("tbody")
  var tableSize = getTable.rows.length;
  var row = getTable.insertRow(tableSize)
  var getName = document.getElementById("fname")
  var getLastName = document.getElementById("lname")
  var getPassword = document.getElementById("password")

  var cell1 = row.insertCell(0).innerHTML = tableSize + 1;
  var cell1 = row.insertCell(1).innerHTML = getName.value;
  var cell2 = row.insertCell(2).innerHTML = getLastName.value;
  var cell3 = row.insertCell(3).innerHTML = getPassword.value;
}


function deleteRow() {
  var getTable = document.getElementById("tbody")
  var tableSize = getTable.rows.length;
  var row = getTable.insertRow(tableSize)
  var getName = document.getElementById("fname")
  var getLastName = document.getElementById("lname")
  var getPassword = document.getElementById("password")

  var cell1 = row.deleteCell(0).innerHTML = tableSize + 1;
  var cell1 = row.deleteCell(1).innerHTML = getName.value;
  var cell2 = row.deleteCell(2).innerHTML = getLastName.value;
  var cell3 = row.deleteCell(3).innerHTML = getPassword.value;




}

<table id="table" border="1">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Password</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
First Name: <input type="text" name="fname" id="fname" value="fname" /> <br /> Last Name: <input type="text" name="lname" id="lname" value="lname" /> <br /> Password: <input type="text" name="password" id="password" value="password" /> <br />
<button onclick="addRow()">Add</button><br /><br />


<button onClick="deleteRow()">Delete</button>

Answer 1

您正在 deleteRow 函数

中执行“ var row = getTable.insertRow（tableSize）”

使用

var row = getTable.deleteRow(tableSize - 1)

注意：您必须使用

tableSize-1

由于索引是基于0的，因此您也不需要在上一行之后添加任何行

这是一个有用的小提琴https://jsfiddle.net/tLo810kv/1/

Answer 2

您可以编写以下删除功能

function addRow() {
  var getTable = document.getElementById("tbody")
  var tableSize = getTable.rows.length;
  var row = getTable.insertRow(tableSize)
  var getName = document.getElementById("fname")
  var getLastName = document.getElementById("lname")
  var getPassword = document.getElementById("password")

  var cell1 = row.insertCell(0).innerHTML = tableSize + 1;
  var cell1 = row.insertCell(1).innerHTML = getName.value;
  var cell2 = row.insertCell(2).innerHTML = getLastName.value;
  var cell3 = row.insertCell(3).innerHTML = getPassword.value;
}


function deleteFunction() {
var table1 = document.getElementById("table");
var rowCount = table1.rows.length;

table1.deleteRow(rowCount -1);
}

<table id="table" border="1">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Password</th>
    </tr>
  </thead>
  <tbody id="tbody">
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
First Name: <input type="text" name="fname" id="fname" value="fname" /> <br /> Last Name: <input type="text" name="lname" id="lname" value="lname" /> <br /> Password: <input type="text" name="password" id="password" value="password" /> <br />
<button onclick="addRow()">Add</button><br /><br />


<button onClick="deleteFunction()">Delete</button>

为什么我的删除单元格变量不删除最后插入的行？

2 个答案: