使用 Javascript 从 HTML 表中删除空行

Question

I have an HTML table that is pulling from a database. Some of the rows are coming in with the text null and I would like to loop through this table and delete or hide any rows that have the text null in them.

The first column will be the column to loop through and find the 'null' text and delete that row but I can't figure out how to do it.

 <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

Try the following:

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

Answer 2

如果您碰巧是从不受控制的后端获取数据（因此您无法查询那些不需要的条目），则可以使用document.querySelectorAll('#ex-table tbody td:nth-child(1)')来获取所有第一列单元格document.querySelectorAll('#ex-table tbody td:nth-child(1)')进行迭代，并在将textContent匹配为null时删除整个行.parentNode.remove() ：

 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

Firstly you're using <col> tags in wrong way, you need to use <colgroup> as their parent and place them outside the <thead> tag. For removing empty rows you should use jQuery, then you need to loop through the rows and then remove it if the first column is empty using td:first-child selector. look at the snippet.

 $("#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>