[ANSWERED] Removing empty column in html table using jQuery

Question 1

Here a way to remove all empty rows/tds by trimming the whitespace.

function removeEmptyColumns() {
  $('#mytable tr th').each(function(i) {
    //select all td in this column
    var tds = $(this).parents('table')
      .find(`tr td:nth-child(${i + 1})`);
    // check if all the cells in this column are empty
    // Note: Empty strings return 'false' - trim whitespace before.
    if (tds.toArray().every(td => !td.textContent.trim())) {
      //hide header
      $(this).hide();
      //hide cells
      tds.hide();
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="removeEmptyColumns()">Remove empty columns</button>

<table id="mytable" class="rg-table zebra" style="width: 1838px;" title="" summary="">
  <caption class="rg-header"><span id="rg-hed" class="rg-hed" title="ID: rg-hed">25.05.2020</span> <span id="abc" class="xyz" title=""></span></caption>
  <thead>
    <tr>
      <th class=" " style="width: 96px;">First Column</th>
      <th class=" " style="width: 10px;">07:00</th>
      <th class=" " style="width: 46px;">07:15</th>
      <th class=" " style="width: 46px;">07:30</th>
      <th class=" " style="width: 46px;">07:45</th>
      <th class=" " style="width: 46px;">08:00</th>
      <th class=" " style="width: 46px;">08:15</th>
      <th class=" " style="width: 46px;">08:30</th>
      <th class=" " style="width: 46px;">08:45</th>
      <th class=" " style="width: 46px;">09:00</th>
      <th class=" " style="width: 46px;">09:15</th>
      <th class=" " style="width: 46px;">09:30</th>
      <th class=" " style="width: 46px;">09:45</th>
      <th class=" " style="width: 46px;">10:00</th>
      <th class=" " style="width: 46px;">10:15</th>
      <th class=" " style="width: 46px;">10:30</th>
      <th class=" " style="width: 46px;">10:45</th>
      <th class=" " style="width: 46px;">11:00</th>
      <th class=" " style="width: 46px;">11:15</th>
      <th class=" " style="width: 46px;">11:30</th>
      <th class=" " style="width: 46px;">11:45</th>
      <th class=" " style="width: 46px;">12:00</th>
      <th class=" " style="width: 46px;">12:15</th>
      <th class=" " style="width: 46px;">12:30</th>
      <th class=" " style="width: 46px;">12:45</th>
      <th class=" " style="width: 46px;">13:00</th>
      <th class=" " style="width: 46px;">13:15</th>
      <th class=" " style="width: 46px;">13:30</th>
      <th class=" " style="width: 46px;">13:45</th>
      <th class=" " style="width: 46px;">14:00</th>
      <th class=" " style="width: 46px;">14:15</th>
      <th class=" " style="width: 46px;">14:45</th>
      <th class=" " style="width: 46px;">17:45</th>
      <th class=" " style="width: 46px;">18:00</th>
      <th class=" " style="width: 46px;">18:15</th>
    </tr>
  </thead>
  <tbody>
    <tr class="">
      <td class=" " style="background-color: #ffffff; width: 96px;">a</td>
      <td class=" " style="width: 10px;" data-title="07:00">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="07:15">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="07:30">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="07:45">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="08:00">&nbsp;</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
      <td class=" " style="width: 46px;" data-title="10:15">&nbsp;</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:15">abc</td>
      <td class=" " style="width: 46px;" data-title="12:30">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="12:45">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="13:00">&nbsp;</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="17:45">abc</td>
      <td class=" " style="width: 46px;" data-title="20:30">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="20:45">&nbsp;</td>
    </tr>
    <tr class="">
      <td class=" " style="background-color: #ffffff; width: 96px;">b</td>
      <td class=" " style="width: 10px;" data-title="07:00">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="07:15">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="07:30">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="07:45">&nbsp;</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
      <td class=" " style="width: 46px;" data-title="09:30">&nbsp;</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
      <td class=" " style="width: 46px;" data-title="11:45">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="12:00">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="12:15">&nbsp;</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:15">abc</td>
      <td class=" " style="width: 46px;" data-title="14:45">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="17:45">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="20:30">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="20:45">&nbsp;</td>
    </tr>
    <tr class="">
      <td class=" " style="background-color: #ffffff; width: 96px;">c</td>
      <td class=" " style="width: 10px;" data-title="07:00">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="07:15">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="07:30">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="07:45">&nbsp;</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:30">abc</td>
      <td class=" " style="width: 46px;" data-title="09:45">&nbsp;</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:45">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:00">abc</td>
      <td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:15">abc</td>
      <td class=" " style="width: 46px;" data-title="12:30">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="12:45">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="13:00">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="13:15">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="13:30">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="13:45">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="14:00">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="14:15">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="14:45">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="17:45">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="20:30">&nbsp;</td>
      <td class=" " style="width: 46px;" data-title="20:45">&nbsp;</td>
    </tr>
  </tbody>
</table>

Question 2

I have a html table that looks like this. When a button is clicked, the empty columns should be removed.
In my example, the columns 07:00,07:15,07:30, 07:45, 18:00, 18:15 are to be removed Currently, my function removeEmptyColumns() does not work (does not remove any columns). Could it be because of the spaces? ( ). How must the function be modified that it works?

https://jsfiddle.net/Smolo/d2nyefuL/

<button onclick="removeEmptyColumns()">Remove empty columns</button>

<table id="mytable" class="rg-table zebra" style="width: 1838px;" title="" summary=""><caption class="rg-header"><span id="rg-hed" class="rg-hed" title="ID: rg-hed">25.05.2020</span> <span id="abc" class="xyz" title=""></span></caption>
<thead>
<tr>
<th class=" " style="width: 96px;">First Column</th>
<th class=" " style="width: 10px;">07:00</th>
<th class=" " style="width: 46px;">07:15</th>
<th class=" " style="width: 46px;">07:30</th>
<th class=" " style="width: 46px;">07:45</th>
<th class=" " style="width: 46px;">08:00</th>
<th class=" " style="width: 46px;">08:15</th>
<th class=" " style="width: 46px;">08:30</th>
<th class=" " style="width: 46px;">08:45</th>
<th class=" " style="width: 46px;">09:00</th>
<th class=" " style="width: 46px;">09:15</th>
<th class=" " style="width: 46px;">09:30</th>
<th class=" " style="width: 46px;">09:45</th>
<th class=" " style="width: 46px;">10:00</th>
<th class=" " style="width: 46px;">10:15</th>
<th class=" " style="width: 46px;">10:30</th>
<th class=" " style="width: 46px;">10:45</th>
<th class=" " style="width: 46px;">11:00</th>
<th class=" " style="width: 46px;">11:15</th>
<th class=" " style="width: 46px;">11:30</th>
<th class=" " style="width: 46px;">11:45</th>
<th class=" " style="width: 46px;">12:00</th>
<th class=" " style="width: 46px;">12:15</th>
<th class=" " style="width: 46px;">12:30</th>
<th class=" " style="width: 46px;">12:45</th>
<th class=" " style="width: 46px;">13:00</th>
<th class=" " style="width: 46px;">13:15</th>
<th class=" " style="width: 46px;">13:30</th>
<th class=" " style="width: 46px;">13:45</th>
<th class=" " style="width: 46px;">14:00</th>
<th class=" " style="width: 46px;">14:15</th>
<th class=" " style="width: 46px;">14:45</th>
<th class=" " style="width: 46px;">17:45</th>
<th class=" " style="width: 46px;">18:00</th>
<th class=" " style="width: 46px;">18:15</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class=" " style="background-color: #ffffff; width: 96px;">a</td>
<td class=" " style="width: 10px;" data-title="07:00">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="07:15">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="07:30">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="07:45">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="08:00">&nbsp;</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
<td class=" " style="width: 46px;" data-title="10:15">&nbsp;</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:15">abc</td>
<td class=" " style="width: 46px;" data-title="12:30">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="12:45">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="13:00">&nbsp;</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="17:45">abc</td>
<td class=" " style="width: 46px;" data-title="20:30">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="20:45">&nbsp;</td>
</tr>
<tr class="">
<td class=" " style="background-color: #ffffff; width: 96px;">b</td>
<td class=" " style="width: 10px;" data-title="07:00">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="07:15">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="07:30">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="07:45">&nbsp;</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
<td class=" " style="width: 46px;" data-title="09:30">&nbsp;</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
<td class=" " style="width: 46px;" data-title="11:45">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="12:00">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="12:15">&nbsp;</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="13:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="14:15">abc</td>
<td class=" " style="width: 46px;" data-title="14:45">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="17:45">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="20:30">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="20:45">&nbsp;</td>
</tr>
<tr class="">
<td class=" " style="background-color: #ffffff; width: 96px;">c</td>
<td class=" " style="width: 10px;" data-title="07:00">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="07:15">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="07:30">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="07:45">&nbsp;</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="08:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="09:30">abc</td>
<td class=" " style="width: 46px;" data-title="09:45">&nbsp;</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="10:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:15">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:30">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="11:45">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:00">abc</td>
<td class=" " style="background-color: #ffffdc; width: 46px;" data-title="12:15">abc</td>
<td class=" " style="width: 46px;" data-title="12:30">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="12:45">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="13:00">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="13:15">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="13:30">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="13:45">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="14:00">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="14:15">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="14:45">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="17:45">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="20:30">&nbsp;</td>
<td class=" " style="width: 46px;" data-title="20:45">&nbsp;</td>
</tr>
</tbody>
</table>

JS function:

function removeEmptyColumns() {

    $('#mytable tr th').each(function(i) {
   //select all td in this column
    var tds = $(this).parents('table')
          .find('tr td:nth-child(' + (i + 1) + ')');
    //check if all the cells in this column are empty
    if(tds.length == tds.filter(':empty').length) { 
        //hide header
        $(this).hide();
        //hide cells
        tds.hide();
    } 
    });

}

Bollate

[ANSWERED] Removing empty column in html table using jQuery

By

Solution 1 :

Problem :

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Leave a Reply Cancel reply

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate