Question

请你看一下this demo，让我知道如何隐藏或删除动态表格中<td>（如果它们全部连续）为空的所有行？这主要发生在表的末尾，因为我生成了一个包含5行的表，但有时我只从数据源获得3或4行数据。

请注意，我的意思是文本值不是像div这样的html元素。

<table style="width:100%">
    <tr>
        <td class="monBox">Jill</td>
        <td class="monBox">Smith</td>
        <td class="monBox">50</td>
    </tr>
    <tr>
        <td class="monBox">Eve</td>
        <td class="monBox">Jackson</td>
        <td class="monBox">94</td>
    </tr>
    <tr>
        <td class="monBox"></td>
        <td class="monBox"></td>
        <td class="monBox"></td>
    </tr>
    <tr>
        <td class="monBox">Eve</td>
        <td class="monBox">Jackson</td>
        <td class="monBox">94</td>
    </tr>
     <tr>
        <td class="monBox"></td>
        <td class="monBox"></td>
        <td class="monBox"></td>
    </tr>   

</table>

由于

Answer 1

尝试浏览每个tr并检查里面的所有td元素是否都是空的

$('table').find('tr').each (function() {

    var rows = 0;
    var rows_empty = 0;

     $(this).find('td').each (function() {
          rows++;
          if($(this).text().trim() == "")
              rows_empty++;
    }); 

    if(rows === rows_empty)
        $(this).remove();
});

jsfiddle

Answer 2

试试这个，请注意我已经为表格提供了target：

的ID

//Loop through rows with empty cells
$("#target tr").has("td:empty").each(function(){
    //hide the row if all cells are empty
    if($(this).find("td").length === $(this).find("td:empty").length){
        $(this).hide();    
   }
});

Fiddle

或稍微简单：

$("#target tr").has("td:empty").each(function(){
    if($(this).find("td:not(:empty)").length === 0){
        $(this).hide();
    }
});

或更好：

$('#target tr').not(':has(td:not(:empty))').remove();

Demo

Answer 3

$('#target tr').each(function(index,el).   
 { 
    if($.trim($(this).text()) == '')
    {
       $(this).remove();
    }
}
);

无需检查表格单元格即可正常工作

删除/隐藏他们没有文字的表格

3 个答案: