CODEWITHSUNDEEP
javascripthtml
JStone
JStone

Reputation: 119

Deleting a table column from html table using JavaScript

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.

Upvotes: 1

Views: 2903

Answers (1)

Invizio
Invizio

Reputation: 392

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

Upvotes: 3

Related Questions