Удаление пустых строк из таблицы HTML с помощью Javascript

Question

У меня есть таблица HTML, которая извлекается из базы данных. Некоторые строки содержат текст null , и я хотел бы пройтись по этой таблице и удалить или скрыть все строки, в которых есть текст null .

Первый столбец будет столбцом, который нужно перебрать, найти «нулевой» текст и удалить эту строку, но я не могу понять, как это сделать.

<table class="table table-striped" id="ex-table">
  <thead class="thead-inverse">
    <col width="120">
    <col width="120">
    <col width="120">
    <tr>
      <th bgcolor="#feaf3f">Item</th>
      <th bgcolor="#feaf3f">Price</th>
      <th bgcolor="#feaf3f">Sale Price</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tr">
      <td id="Item"></td>
      <td id="Price"></td>
      <td id="salePrice"></td>
    </tr>
  </tbody>
</table>

Answer 1

Во-первых, вы неправильно используете теги <col>, вам нужно использовать <colgroup> в качестве родительского элемента и размещать их вне тега <thead>. Для удаления пустых строк вы должны использовать jQuery, затем вам нужно перебрать строки, а затем удалить их, если первый столбец пуст с помощью селектора td:first-child. посмотрите на фрагмент.

$("#ex-table tbody tr").each(function() {
  var html = $(this).find("td:first-child").html();
  if (html === 'null') {
    $(this).remove()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="ex-table">
  <colgroup>
    <col width="120">
    <col width="120">
    <col width="120">
  </colgroup>

  <thead class="thead-inverse">
    <tr>
      <th bgcolor="#feaf3f">Item</th>
      <th bgcolor="#feaf3f">Price</th>
      <th bgcolor="#feaf3f">Sale Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td id="Item">null</td>
      <td id="Price">50</td>
      <td id="salePrice">60</td>
    </tr>
    <tr id="tr">
      <td id="Item">2</td>
      <td id="Price">60</td>
      <td id="salePrice">70</td>
    </tr>
  </tbody>
</table>

Answer 2

Если вам довелось получить данные из бэкэнда, которым вы не управляете (поэтому вы не можете запросить эти нежелательные записи), вы можете получить все первые ячейки столбца с помощью document.querySelectorAll('#ex-table tbody td:nth-child(1)'), выполнить итерацию по ним и удалитьвесь ряд .parentNode.remove() при сопоставлении textContent с null:

document.getElementById('cleanup').addEventListener('click', () => [...document.querySelectorAll('#ex-table tbody td:nth-child(1)')].forEach(td => td.textContent == 'null' ? td.parentNode.remove() : true));

<table id="ex-table"><thead><tr><th>Item</th><th>Price</th><th>Sale Price</th></tr></thead><tbody><tr><td>1</td><td>null</td><td>33</td></tr><tr><td>2</td><td>38</td><td>50</td></tr><tr><td>null</td><td>null</td><td>null</td></tr><tr><td>3</td><td>41</td><td>54</td></tr><tr><td>4</td><td>13</td><td>17</td></tr><tr><td>5</td><td>2</td><td>3</td></tr></tbody></table><button id="cleanup">Clean</button>

Answer 3

Попробуйте следующее:

var rowTag = document.getElementsByTagName("TD")
if(rowTag.textContent == "null"){
  rowTag.parentNode.removeChild()
}