时间戳

首页 > 解决方案 > 如何通过javascript中的单元格内容删除行？

javascript - 如何通过javascript中的单元格内容删除行？

问题描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Data Storage Web</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Customer Details :-</h2>
    <div
      style="border-right: 2px solid black; width: 330px; height: max-content"
    >
      Name :- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&emsp;
      <input
        type="username"
        id="UN"
        placeholder="Customer Name"
        style="
          border: none;
          border-bottom: 2px solid black;
          outline: none;
          font-size: medium;
        "
      />
      <br /><br />
      Amount :- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input
        type="number"
        id="UA"
        placeholder="Due Amount"
        style="
          border: none;
          border-bottom: 2px solid black;
          outline: none;
          font-size: medium;
        "
      />
      <br /><br />
      Phone No. :-&nbsp;&nbsp;&nbsp;
      <input
        type="number"
        id="PN"
        placeholder="Phone No."
        style="
          border: none;
          border-bottom: 2px solid black;
          outline: none;
          font-size: medium;
        "
      />
      <br /><br />
      <button
        style="width: 300px; border-radius: 5px; height: 30px"
        onclick="RecordData()"
      >
        <b
          style="
            font-family: helvetica;
            font-size: medium;
            color: rgb(41, 35, 35);
          "
          >SAVE</b
        >
      </button>
    </div>
    <div
      style="
        /* border: 2px solid black; */
        width: 350px;
        height: 200px;
        margin-left: 350px;
        margin-top: -215px;
      "
    >
      <h2>Edit :-</h2>
      ID :- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&emsp;
      <input
        type="number"
        id="UNIDR"
        placeholder="Customer ID"
        style="
          border: none;
          border-bottom: 2px solid black;
          outline: none;
          font-size: medium;
        "
      />
      <button onclick="removeID()">Remove</button>
    </div>
    <br />
    <hr />
    <span>
      <h2>Data :-</h2>
      <table id="DataTable">
        <tr>
          <th>S.No</th>
          <th>Name</th>
          <th>Amount</th>
          <th>Phone No.</th>
          <th>Issue Date</th>
          <th>Due Date</th>
          <th>Customer ID</th>
        </tr>
      </table>
    </span>

    <script>
      serielNumber = 1;
      function RecordData() {
        var length1 = document.getElementById("UN").value;
        var length2 = document.getElementById("UA").value;
        var length3 = document.getElementById("PN").value;
        if (
          (length1 == null || length1 == "",
          length2 == null || length2 == "",
          length3 == null || length3 == "")
        ) {
          alert("Enter all values first !");
        } else {
          var value1 = document.getElementById("UN").value;
          var value2 = document.getElementById("UA").value;
          var value3 = document.getElementById("PN").value;
          var table = document.getElementById("DataTable");
          var dateObj = new Date();
          var month = dateObj.getUTCMonth() + 1;
          var day = dateObj.getUTCDate();
          var year = dateObj.getUTCFullYear();
          var dddmmyy1 = day + "/" + month + "/" + year;
          var dddmmyy2 = day + "/" + (month + 1) + "/" + year;
          var row = table.insertRow(-1);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          var cell3 = row.insertCell(2);
          var cell4 = row.insertCell(3);
          var cell5 = row.insertCell(4);
          var cell6 = row.insertCell(5);
          var cell7 = row.insertCell(6);
          cell1.innerHTML = serielNumber;
          serielNumber++;
          cell2.innerHTML = value1;
          cell3.innerHTML = value2;
          cell4.innerHTML = value3;
          cell5.innerHTML = dddmmyy1;
          cell6.innerHTML = dddmmyy2;
          cell7.innerHTML = Math.floor(Math.random() * 10000 + 11111);
          var value1 = (document.getElementById("UN").value = "");
          var value2 = (document.getElementById("UA").value = "");
          var value3 = (document.getElementById("PN").value = "");
        }
      }

      function removeID() {
        var row_remove = document.getElementById("UNIDR").value;
        console.log(row_remove);
        table.deleteRow(row_remove)[6];
      }
    </script>
  </body>
</html>

首先，我在第一部分输入值，这将针对我输入的数据添加一个新行，但是每一行都有随机生成的唯一客户 ID。我想通过在编辑字段中输入该客户 ID 并单击编辑侧的删除按钮来删除该行，但我无法通过此代码执行此操作，我知道它错了，请更正它。

function removeID() {
        var row_remove = document.getElementById("UNIDR").value;
        console.log(row_remove);
        table.deleteRow(row_remove)[6];
      }

标签： javascript

解决方案

您可以使用以下代码根据客户 ID 单元格进行细化：

var row = Array.from(table.getElementsByTagName("tr")).filter(t => +t.cells[6].innerText == row_remove)

然后您可以需要从表中删除该行：

row[0].parentNode.removeChild(row[0])

这是工作片段：

serielNumber = 1;
function RecordData() {
    var length1 = document.getElementById("UN").value;
    var length2 = document.getElementById("UA").value;
    var length3 = document.getElementById("PN").value;
    if (
        (length1 == null || length1 == "",
            length2 == null || length2 == "",
            length3 == null || length3 == "")
    ) {
        alert("Enter all values first !");
    } else {
        var value1 = document.getElementById("UN").value;
        var value2 = document.getElementById("UA").value;
        var value3 = document.getElementById("PN").value;
        var table = document.getElementById("DataTable");
        var dateObj = new Date();
        var month = dateObj.getUTCMonth() + 1;
        var day = dateObj.getUTCDate();
        var year = dateObj.getUTCFullYear();
        var dddmmyy1 = day + "/" + month + "/" + year;
        var dddmmyy2 = day + "/" + (month + 1) + "/" + year;
        var row = table.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);
        cell1.innerHTML = serielNumber;
        serielNumber++;
        cell2.innerHTML = value1;
        cell3.innerHTML = value2;
        cell4.innerHTML = value3;
        cell5.innerHTML = dddmmyy1;
        cell6.innerHTML = dddmmyy2;
        cell7.innerHTML = Math.floor(Math.random() * 10000 + 11111);
        var value1 = (document.getElementById("UN").value = "");
        var value2 = (document.getElementById("UA").value = "");
        var value3 = (document.getElementById("PN").value = "");
    }
}

function removeID() {
    var row_remove = document.getElementById("UNIDR").value;
    console.log(row_remove);
    var table = document.getElementById("DataTable");
    var rows = table.getElementsByTagName("tr");
    var row = Array.from(rows).filter(t => +t.cells[6].innerText == row_remove)
    if (table.getElementsByTagName("tr").length > 1 && row && row.length == 1)
        row[0].parentNode.removeChild(row[0])
}
table,
        th,
        td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 5px;
            text-align: center;
        }
    <h2>Customer Details :-</h2>
    <div style="border-right: 2px solid black; width: 330px; height: max-content">
        Name :- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&emsp;
        <input type="username"
               id="UN"
               placeholder="Customer Name"
               style="
          border: none;
          border-bottom: 2px solid black;
          outline: none;
          font-size: medium;
        " />
        <br /><br />
        Amount :- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number"
               id="UA"
               placeholder="Due Amount"
               style="
          border: none;
          border-bottom: 2px solid black;
          outline: none;
          font-size: medium;
        " />
        <br /><br />
        Phone No. :-&nbsp;&nbsp;&nbsp;
        <input type="number"
               id="PN"
               placeholder="Phone No."
               style="
          border: none;
          border-bottom: 2px solid black;
          outline: none;
          font-size: medium;
        " />
        <br /><br />
        <button style="width: 300px; border-radius: 5px; height: 30px"
                onclick="RecordData()">
            <b style="
            font-family: helvetica;
            font-size: medium;
            color: rgb(41, 35, 35);
          ">SAVE</b>
        </button>
    </div>
    <div style="
        /* border: 2px solid black; */
        width: 350px;
        height: 200px;
        margin-left: 350px;
        margin-top: -215px;
      ">
        <h2>Edit :-</h2>
        ID :- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&emsp;
        <input min="1" type="number"
               id="UNIDR"
               placeholder="Customer ID"
               style="
          border: none;
          border-bottom: 2px solid black;
          outline: none;
          font-size: medium;
        " />
        <button onclick="removeID()">Remove</button>
    </div>
    <br />
    <hr />
    <span>
        <h2>Data :-</h2>
        <table id="DataTable">
            <tr>
                <th>S.No</th>
                <th>Name</th>
                <th>Amount</th>
                <th>Phone No.</th>
                <th>Issue Date</th>
                <th>Due Date</th>
                <th>Customer ID</th>
            </tr>
        </table>
    </span>

推荐阅读