如果所有列都为空，则删除/隐藏表行 [英] Remove/ hide table row if all columns are empty

问题描述

我一直试图隐藏完整的表行，以防所有tds为空.我可以正常工作，但如果任何td都有空格，则该代码不适用于该tr.

I have been trying to hide the complete table row in case all the tds are empty . I works fine but in case any td has blank space the code doesn't work for that tr.

以下是代码段

$('tr').filter(
    function(){
        return $(this).find('td').length == $(this).find('td:empty').length;
    }).hide();

table {
    empty-cells: show;
}

td {
    width: 2em;
    height: 2em;
    border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1">
    <tbody>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr >
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr >
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
         <tr >
            <td>a</td>
            <td></td>
            <td>c</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </tbody>
</table>

这是 js小提琴

请帮助..预先感谢

推荐答案

您可以filter() TD并使用trim()避免空格..如此

You can filter() the TDs and use trim() to avoid white-spaces .. like so

$('tr').filter(
    function(){
        return $(this).find('td').length == $(this).find('td').filter(function(){
            return $(this).text().trim() == '';
        }).length;
    }).hide();


   $("tr").filter(function() {
    return $(this).text() === "-";
}).parent().hide();

注意:请确保使用find('td')而不是find('td:empty')

$('tr').filter(
    function(){
        return $(this).find('td').length == $(this).find('td').filter(function(){
        	return $(this).text().trim() == '';
        }).length;
    }).hide();
    
   
   $("tr").filter(function() {
    return $(this).text() === "-";
}).parent().hide();

table {
    empty-cells: show;
}

td {
    width: 2em;
    height: 2em;
    border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
    <tbody>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr >
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr >
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
         <tr >
            <td>a</td>
            <td></td>
            <td>c</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
    </tbody>
</table>

这篇关于如果所有列都为空，则删除/隐藏表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！