Question

我正在尝试执行静态粗略操作。当用户在文本框上添加详细信息时，它将存储在对象数组中，然后将该对象打印在表上。现在，我想从数组中通过删除按钮删除行。我尝试了.splice()，但是没有用。数据正在从表中删除，但是我想从数组中删除它。我在下面提供我的页面：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Table With Bootstrap</title>
  <link rel="stylesheet" href="bootstrap.min.css">
</head>

<body><br><br><br>
  <div class="container">
    <h1 align="center">Enter Details</h1><br>
    <div class="row">
      <div class="col-sm-4">
        <!--style="border:solid"-->
        <div>
          <label>Enter ID: </label><br>
          <input type="number" class="form-control" id="id" name="id" required/>

          <label>Enter Name: </label><br>
          <input type="text" class="form-control" id="name" name="name" required/>

          <label>Enter City: </label><br>
          <input type="text" class="form-control" id="city" name="city" required />

          <label>Enter Email: </label><br>
          <input type="email" class="form-control" id="email" name="email" required/><br>

          <button class="btn btn-success" onClick="printTable();">Submit</button> <button class="btn btn-danger" onClick="resetTable();">Reset Table</button></div>
      </div>
      <div class="col=sm-4">
        <h1 style="color: white">Hello World heyy</h1>
      </div>
      <div class="col-sm-4" style="float: right;">
        <table class="table table-sm table-striped table-hover  table-bordered" style="border-radius: 5px;">
          <thead class="thead-dark">
            <tr>
              <th>User ID</th>
              <th>User Name</th>
              <th>User Email</th>
              <th>User City</th>
              <th>User Delete</th>
            </tr>
          </thead>
          <tbody id="showResult">

          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script>
    let data = [];

    function resetTable() {
      const confirmMessage = confirm("Are you sure want to reset table data? It will delete all data from table. You cannot undo this action.!");
      if (confirmMessage) {
        window.location.reload();
        alert("Table Data Cleared Successfully");
      } else {
        alert("cancelled.!");
      }
    }

    function printTable() {
      const getId = document.getElementById("id").value;
      const getName = document.getElementById("name").value;
      const getCity = document.getElementById("city").value;
      const getEmail = document.getElementById("email").value;

      if (getId != '', getName != '', getCity != '', getEmail != '') {

        const obj = {
          id: getId,
          name: getName,
          city: getCity,
          email: getEmail
        }
        data.push(obj);
        print(data);
        $('#id').val("");
        $('#name').val("");
        $('#city').val("");
        $('#email').val("");
      } else {
        alert("All feilds are Mandatory..");
      }
    }

    function print(data) {

      let result = '';

      for (let i = 0; i < data.length; i++) {

        result += `

<tr id='row'>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].email}</td>
<td>${data[i].city}</td>
<td><input type='button' onclick='deleteRow(this);' class='btn btn-danger' value='Delete'/></td>
</tr>`;
        document.getElementById('showResult').innerHTML = result;
      }
    }

    function deleteRow(btn) {
      var cnfrmMessage = confirm("Are you sure want to Delete selected data? You cannot undo this action.");
      if (cnfrmMessage == true) {
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);


      } else {
        alert("Cancelled..!!");
      }
    }
  </script>


</body>

</html>

Answer 1

您需要一种方法来标识HTML元素之外的列表中的项目。看起来您可以使用id列（尽管通常最好将类似的内容放在属性中）。然后您可以使用过滤器：

将ID添加到deleteRow函数。

deleteRow(this, ${data[i].id})

// Removes item with id.
var a = [
    {id:1},
    {id:2},
    {id:3},
    {id:4},
    {id:5},
    {id:6},
    {id:7},
    {id:8},
    {id:9}
];

a.filter(item => item.id != deleteId);

Answer 2

我认为您忘记了更新数据数组。将您的deleteRow函数更改为

function deleteRow(btn) {
var cnfrmMessage = confirm("Are you sure want to Delete selected data? You cannot undo this action.");
if(cnfrmMessage == true){
    var row = btn.parentNode.parentNode;
    row.parentNode.removeChild(row);
    // update your data (remove item by row id)
    data = data.filter((item)=>item.id!==$(row).children()[0].innerText);
}
else{
    alert("Cancelled..!!");
}
}

您的数组实际上是一个“数据”。因此，您需要一个唯一的ID来删除特定的行或对此执行某些操作。另外，您可以比较要删除的该行中的所有字段，但这不是一个好的解决方案。

如何在单击按钮时从数组中删除对象？

2 个答案: