Question

嗨，我是一个初学者，我正在尝试做一个简单的CRUD Car应用程序，但是我无法使用函数deleteRow（）删除行。

我已经创建了一个函数deleteRow，我在每行中使用createElement方法添加了一个复选框，并使用setAttribute（）方法设置了Id属性。在我的函数中，我试图转到该复选框以查看是否已选中，是否使用deleteRow方法删除行。

function addRow() {
  /* check if its empty */
  var brandValue = document.getElementById("brand").value;
  var modelValue = document.getElementById("model").value;
  if (brandValue == "" || modelValue == "") {
    return alert("Make sure you enter a brand and a model!")
  }

  /* Add a row */
  "use strict";
  var table = document.getElementById("table");
  var row = document.createElement("tr");
  var td1 = document.createElement("td");
  var td2 = document.createElement("td");
  var td3 = document.createElement("INPUT");

  td3.setAttribute("type", "checkbox");
  td3.setAttribute("id", "cb");

  td1.innerHTML = document.getElementById("brand").value;
  td2.innerHTML = document.getElementById("model").value;

  row.appendChild(td1);
  row.appendChild(td2);
  row.appendChild(td3);

  table.children[0].appendChild(row);

  document.getElementById('brand').value = "";
  document.getElementById('model').value = "";
}

var temp = 1;

function deleteRow() {
  for (var j = temp - 2; j >= 0; j--) {

    if (document.table.cb[j].checked) {
      document.getElementById("table").deleteRow(j + 1);

    }
  }

}

<input type="text" id="brand" placeholder="Add a brand">
<input type="text" id="model" placeholder="Add a Model">
<button type="button" onClick="addRow()" id="add">Update</button>
<button type="button" onClick="deleteRow()" id="delete">Delete</button>

<table id="table">
  <div class="tableDiv">
    <tr>
      <th>Brands</th>
      <th>Models</th>
      <th>Select</th>
    </tr>
  </div>
</table>

现在，当我尝试删除并且浏览器控制台中没有任何内容时，什么也没有发生。

感谢您的帮助。

Answer 1

for (var j = temp - 2; j >= 0; j--) {此循环永远不会由于temp被1而开始。

1-2 = -1，所以循环条件（j >= 0）永远都不成立。

Answer 2

您的主要错误是您不需要重复任何操作，可以直接选择选中的元素。尝试使用document.querySelector（“＃table input [type ='checkbox']：checked”）

另一件事是，现在您要为多个元素分配相同的ID。不应这样做，否则可能导致意外行为。考虑改用class或custom属性

Answer 3

尝试一下：

const $brand = document.getElementById("brand")
const $model = document.getElementById("model")

const $table = document.getElementById("table")

function addRow() {
  /* check if its empty */
  if ($brand.value == "" || $model.value == "") {
    return alert("Make sure you enter a brand and a model!")
  }  
  
  let $row = document.createElement("tr");
  let $td1 = document.createElement("td");
  let $td2 = document.createElement("td");
  let $td3 = document.createElement("input");

  $td3.setAttribute("type", "checkbox");

  $td1.innerHTML = $brand.value;
  $td2.innerHTML = $model.value;

  $row.appendChild($td1);
  $row.appendChild($td2);
  $row.appendChild($td3);

  $table.children[0].appendChild($row);

  $brand.value = "";
  $model.value = "";
}

function deleteRow() {
  let checkboxs = $table.querySelectorAll("input[type='checkbox']:checked")
  checkboxs.forEach(checkbox => checkbox.parentElement.remove())
}

<input type="text" id="brand" placeholder="Add a brand"></input>
<input type="text" id="model" placeholder="Add a Model"></input>
<button type="button" onClick="addRow()" id="add">Update</button>
<button type="button" onClick="deleteRow()" id="delete">Delete</button>
</div>
<table id="table">
  <div class="tableDiv" <tr>
    <th>Brands</th>
    <th>Models</th>
    <th>Select</th>
    </tr>
  </div>
</table>

JavaScript删除带有复选框的行

3 个答案: