почему мои переменные удаления ячеек не удаляют последнюю вставленную строку? - PullRequest
0 голосов
/ 21 марта 2019

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

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>

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Вы можете написать свою функцию удаления, как показано ниже

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>
0 голосов
/ 21 марта 2019

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

использовать

var row = getTable.deleteRow(tableSize - 1)

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

tableSize - 1

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...