Блог

Главная - Вопросы по программированию - почему мои переменные delete cell не удаляют последнюю вставленную строку?

почему мои переменные delete cell не удаляют последнюю вставленную строку?

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

Я пытаюсь удалить последнюю вставленную строку в функции add row в моем коде. может кто-нибудь объяснить мне, почему код функции удаления не работает? вот код. Я полный новичок в программировании, поэтому, пожалуйста, не ругайте меня. У меня есть теория, что я должен получить элемент table row и вставить функцию delete row с отрицательным значением в качестве параметра. 

 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>

Ответ №1:

вы выполняете «var row = GetTable.insertRow(tableSize)» в вашей функции deleteRow

используйте 

 var row = getTable.deleteRow(tableSize - 1)

Примечание: вы должны использовать

Размер таблицы — 1

поскольку индекс основан на 0, также вам не нужны никакие строки, следующие за приведенной выше строкой

вот рабочая скрипка https://jsfiddle.net/tLo810kv/1 /

Ответ №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>