Question

我一直试图隐藏整个表行，以防所有tds都为空。我工作正常，但万一td有空格，代码不适用于那个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 fiddle

请帮助..提前致谢

Answer 1

你可以filter()使用trim()来避免使用空格..就像这样

$('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>

Answer 2

将.length更改为.text().trim().length，以便您检查元素中文本的长度，修剪任何空格：

return $(this).find('td').text().trim().length === 0;

您的代码正在检查连续存在多少个TD，而不是它们是否为空。上面的行检查是否有任何非空格。

.trim()删除所有空格，包括新行和 。

请参阅.text()和.trim()上的jQuery文档：

Answer 3

像这样Array#each功能
并应用trim()。它会忽略&npsb个空格。
最后与Array#every

<强> 解释

首先迭代每个tr代码，然后迭代'td'的每个tr代码。{/ li>
然后验证每个td有一些内容或为空。
在array.else传递1

0

然后检查数组是否相同arguments或不是
最后应用了hide和show函数

＆＃13;

$('tr').each(function() {
  var n = [];
 $(this).children('td').each(a => n.push(($(this).text().trim() == "") ? 1 : 0))
  n.every(a => a) ? $(this).hide() : $(this).show();
})

＆＃13;

table {
  empty-cells: show;
}

td {
  width: 2em;
  height: 2em;
  border: 1px solid #000;
}

＆＃13;

<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>

＆＃13;

如果所有列都为空，则删除/隐藏表行

3 个答案: