在javscript中动态删除行

问题描述 投票：0回答：3

我是 javascript 新手，需要一些帮助。

我正在开发 

Add/Remove
功能，用于在输入时从表中添加和删除数据。 Add 操作工作正常，但我无法 
delete
表中的行。 我已经浏览了一些文档和链接，但我没有得到。

有人可以帮我吗？

代码片段：

<!DOCTYPE html>
<html>

<head lang="en">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <style>
    body {
      margin: 85px;
    }
    
    .btn-primary {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <form class="container">
    <div class="form-group">
      <label for="name">Enter Name</label>
      <input type="text" class="form-control" id="firstname" placeholder="Enter Your Name">
    </div>
    <div class="form-group">
      <label for="age">Enter Age</label>
      <input type="text" class="form-control" id="age" placeholder="Age">
    </div>
    <div class="form-group">
      <label for="subject">Enter Subject</label>
      <input type="text" class="form-control" id="stusubject" placeholder="Subject">
    </div>
    <input type="button" onclick="showName()" class="btn btn-primary" value="submit">
  </form>
  <table class="table container mt-5" id="studList">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Subject</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
      </tr>
    </tbody>
  </table>
</body>

</html>
<script>
  var student = [{
      nname: "abc",
      age: 18,
      subject: "eng"
    },
    {
      nname: "red",
      age: 20,
      subject: "math"
    }
  ]

  function showName() {
    var firstName = document.getElementById("firstname").value;
    var age = document.getElementById("age").value;
    var stusubject = document.getElementById("stusubject").value;

    console.log("firstName :", firstName);
    console.log("Age :", age);
    console.log("subject :", stusubject);

    // push the data in array
    var newstud = {
      nname: firstName,
      age: age,
      subject: stusubject,
    }
    student.push(newstud);
    //console.log(newstud);
    console.log(student);

    var table = ' <tr>' +
      '<td>' + firstName + '</td>' +
      '<td>' + age + '</td>' +
      '<td>' + stusubject + '</td>' +
      '<td> <input type="button" onclick="delName(r)"  class="btn btn-primary" value="Delete"></td></td>' +
      '</tr>'
    $(table).appendTo('#studList tbody');
    console.log("table :", table);
  }

  //delete the row onclcik
  function delName(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("studList").deleteRow(i);
  }
  var table = ' <tr>' +
    '<td>' + firstName + '</td>' -
    +'<td>' + age + '</td>' +
    '<td>' + stusubject + '</td>' +
    '</tr>'
  $(table).deleteRow('#studList tbody');
  console.log("table :", table);
</script>

javascript crud delete-row
3个回答
1
投票

请替换您的以下代码：

年长者：

<td> <input type="button" onclick="delName(r)"  class="btn btn-primary" value="Delete"></td></td>

新增：在代码中添加一个 rowId 变量，其初始值为 0，之后当添加新行时该值会递增。

<td> <input type="button" onclick="delName(deletebtn'+rowId+')" id="deletebtn'+rowId+'" class="btn btn-primary" value="Delete"></td></td>

如果还有什么请告诉我

0
投票

我编辑了您的代码片段并更改了 delete 功能：

  • 删除 
    r
    函数上的 
    delName()
    ，因为它是 未定义。但请改用 
    event.target
    ，它引用事件被分派到的对象。

尝试运行代码片段打击：

function delName() {
    var td = event.target.parentNode; 
    var tr = td.parentNode; // the row to be removed
    tr.parentNode.removeChild(tr);
}


<!DOCTYPE html>
<html>

<head lang="en">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <style>
    body {
      margin: 85px;
    }
    
    .btn-primary {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <form class="container">
    <div class="form-group">
      <label for="name">Enter Name</label>
      <input type="text" class="form-control" id="firstname" placeholder="Enter Your Name">
    </div>
    <div class="form-group">
      <label for="age">Enter Age</label>
      <input type="text" class="form-control" id="age" placeholder="Age">
    </div>
    <div class="form-group">
      <label for="subject">Enter Subject</label>
      <input type="text" class="form-control" id="stusubject" placeholder="Subject">
    </div>
    <input type="button" onclick="showName()" class="btn btn-primary" value="submit">
  </form>
  <table class="table container mt-5" id="studList">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Age</th>
        <th scope="col">Subject</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
      </tr>
    </tbody>
  </table>
</body>

</html>
<script>
  var student = [{
      nname: "abc",
      age: 18,
      subject: "eng"
    },
    {
      nname: "red",
      age: 20,
      subject: "math"
    }
  ]

  function showName() {
    var firstName = document.getElementById("firstname").value;
    var age = document.getElementById("age").value;
    var stusubject = document.getElementById("stusubject").value;

    console.log("firstName :", firstName);
    console.log("Age :", age);
    console.log("subject :", stusubject);

    // push the data in array
    var newstud = {
      nname: firstName,
      age: age,
      subject: stusubject,
    }
    student.push(newstud);
    //console.log(newstud);
    console.log(student);

    var table = ' <tr>' +
      '<td>' + firstName + '</td>' +
      '<td>' + age + '</td>' +
      '<td>' + stusubject + '</td>' +
      '<td> <input type="button" onclick="delName()"  class="btn btn-primary" value="Delete"></td></td>' +
      '</tr>'
    $(table).appendTo('#studList tbody');
    console.log("table :", table);
  }

  //delete the row onclick
  function delName() {
    var td = event.target.parentNode; 
     var tr = td.parentNode; // the row to be removed
     tr.parentNode.removeChild(tr);
  }
  var table = ' <tr>' +
    '<td>' + firstName + '</td>' -
    +'<td>' + age + '</td>' +
    '<td>' + stusubject + '</td>' +
    '</tr>'
  $(table).deleteRow('#studList tbody');
  console.log("table :", table);
</script>

参考：表格行删除按钮

0
投票

您必须删除 table 属性并在 CSS flex 中将 div 创建为表格，并使每行的类相同且 ID 不同，如下所示

<div id='rowUserDataMain' class='row'><div class='name'></div><div class='age'></div><div class='email'></div></div>

$('#rowUserDataMain').children().remove();

//就是这样！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.