Deleting a table column from html table using JavaScript

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

var table = getElementById('database_table').row[0] or something like that?

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. 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.

Invizio · Accepted Answer · 2020-05-19 01:06:33Z

2

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.

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 :

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()
}

edited May 19, 2020 at 1:06

answered May 18, 2020 at 23:54

Invizio

4003 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JStone Over a year ago

Thanks, this is a step in the right direction. But for some reason it's only deleting every other row. I'm gonna mess around with it some more and try to figure out why, but thank you so much for your help!

Invizio Over a year ago

Today I learned that in Javascript, removing a node from the DOM also remove its reference in arrays. And since removing a reference in an array in JS will automatically push the queue forward to fill the now-empty spaces, and the counter increments in the other direction, one out of two elements will be lucky enough to avoid deletion. TL;DR I fixed my code to fix that problem, it's a common issue when deleting stuff in an array while iterating it :)

Collectives™ on Stack Overflow

Deleting a table column from html table using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related