Hide column in javascript

Question

I want to hide the value of column in table, the data of table is bind from database

This is my html code

<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">                                                                          
<thead>
   <tr>
      <th id="th_id_event">Id Event Category</th>
      <th>Event Category</th>
      <th>Description</th>
   </tr>
</thead>
<tbody>
  <% objLOV.forEach(function (lov) { %>
  <tr onclick="callme(this)">
    <td id="td_id_event">
       <%= lov.id %>
    </td>
    <td>
       <%= lov.event_category %>
    </td>
    <td>
       <%= lov.description %>
    </td>
 </tr>
<% }) %>
</tbody>
</table>

<% objLOV.forEach(function (lov) { %> is to get data from database

I have tried like this, but the only first column first row get hide, I want hide all the value of the column id

window.onload = function () {
        document.getElementById("td_id_event").style.display = "none";
        document.getElementById("th_id_event").style.display = "none";
   };

my table

my table after i tried to disable

can anyone help me? thank you..

Answer 1

You can only validly have one element with a given id so attempting to reference multiple elements with the same id is unlikely to work. You could use a class for the element instead i.e. replace

<td id="td_id_event"

with

<td class="id_event"

and then use

window.onload = function () {
    var ids = document.getElementsByClassName("id_event");
    for (var i = 0; i < ids.length; i++) {
        ids[i].style.display = "none";
}