使用 JavaScript 从 html 表中删除表列

Question

I would like to implement a way to delete an entire column from my database table.我想实现一种从我的数据库表中删除整个列的方法。 Right now, all my button does is delete the column title.现在，我的按钮所做的就是删除列标题。 Any help on this would be great!对此的任何帮助都会很棒！ I'm assuming I need to use a for loop on possibly我假设我可能需要使用 for 循环

var table = getElementById('database_table').row[0] or something like that? var table = getElementById('database_table').row[0]或类似的东西？

Here's my code so far:到目前为止，这是我的代码：

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
  <head>
    <title>Table with cars Database</title>
    <style type = "text/css">
    table {
      border-collapse: collapse;
      width: 99%;
      color: #BA55D3;
      font-family: monospace;
      font-size: 25px;
      text-align: left;
      margin-right: 0px;
      margin-left: 5px;
    }
    th {
      background-color: #DAA520;
      color: #8B008B;
    }
    tr:nth-child(even) {
      background-color: #FFD700
    }
    .tiny {
      font-size: 15px;
    }
    </style>
    <script>
    function removeUniqueID() {
      var elem = document.getElementById('uniqueID');
      elem.parentNode.removeChild(elem);
      return false;
    }
    </script>
  </head>
  <body>
    <input type="button" value="Remove uniqueID" onclick="removeUniqueID()" />
    <table id = "database_table">
      <tr>
        <th id = "uniqueID">uniqueID</th>
        <th>name</th>
        <th>width <div class = "tiny">(cm)</div></th>
        <th>left <div class = "tiny">(cm)</div></th>
        <th>right <div class = "tiny">(cm)<div></th>
        <th>l1</th>
        <th>l2</th>
        <th>l3</th>
        <th>dist <div class = "tiny">(cm)</div></th>
        <th>ir</th>
        <th>time <div class = "tiny">(ms)</div></th>
<?php
$conn = mysqli_connect("localhost", "root", "root", "cars");
if ($conn -> connect_error) {
  die("Connection Failed:" . $conn -> connect_error);
}
$sql = "SELECT uniqueID, name, width, left1, right1, l1, l2, l3, dist, ir, time FROM cars";
$result = $conn -> query($sql);
if ($result -> num_rows > 0) {
  while ($row = $result -> fetch_assoc()) {
    echo "<tr><td id ='uniqueIDtd'>" . $row["uniqueID"] . "</td><td>" . $row["name"] . "</td><td>" . $row["width"] . "</td><td>" . $row["left1"] . "</td><td>" . $row["right1"] . "</td><td>" . $row["l1"] . "</td><td>" . $row["l2"] . "</td><td>" . $row["l3"] . "</td><td>" . $row["dist"] . "</td><td>" . $row["ir"] . "</td><td>" . $row["time"] . "</td></tr>";
  }
  echo "</table>";
} else { 
  echo "Empty database";
}
$conn -> close();
?>
  </body>
</html>

I should mention I'm not familiar with jQuery just yet, so I won't be using it for this project.我应该提到我还不熟悉 jQuery，所以我不会在这个项目中使用它。 I'm only saying this because in my research on this topic so far I've seen a lot of talk about how easy jQuery can make it.我之所以这么说，是因为到目前为止，在我对这个主题的研究中，我已经看到很多关于 jQuery 可以轻松实现的讨论。

Answer 1

What you can do is assign a class to each cell of a given column, and from Javascript, delete all elements with the given class.您可以做的是将 class 分配给给定列的每个单元格，然后从 Javascript 中删除具有给定 class 的所有元素。

For example:例如：

echo "<tr><td class='mycol-1'>" . $row["uniqueID"] . "</td><td class='mycol-2'>...

Which will give a table similar to:这将给出一个类似于以下的表格：

<table>
    <tr>
        <td class='mycol-1'>Lorem</td>
        <td class='mycol-2'>Ipsum</td>
        <td class='mycol-3'>Dolor</td>
    </tr>
    <tr>
        <td class='mycol-1'>Sit</td>
        <td class='mycol-2'>Amet</td>
        <td class='mycol-3'>123</td>
    </tr>
</table>

Then in Javascript, to delete a column, simply use:然后在 Javascript 中，要删除一列，只需使用：

var colNum = 2;

var colElems = document.getElementsByClassName("mycol-" + colNum)

// EDIT : Beware when removing elements when iterating an array!
for (var i = colElems.length - 1; i >= 0; i--) {
    colElems[i].remove()
}

使用 JavaScript 从 html 表中删除表列

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-05-18 23:54:02

使用 JavaScript 从 html 表中删除表列

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-05-18 23:54:02

解决方案1
1 已采纳 2020-05-18 23:54:02