根据html表单元格值隐藏行

Question

我有一个表格显示数据库中的数据，并且我有一个带有简单算术函数的单元格。 我想隐藏总和为零的整个行（如果$ sold值为零）。

<input type="button" id="btnHide" Value=" Hide Empty Rows " /> 
 
... 
 
<tbody> 
 
\t \t \t <?php } 
 
\t 
 
    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 
 
    $sold=$row['value1']+$row['value2']); 
 
    
 
\t { ?> 
 
      <tr> 
 
\t \t \t <td><?php echo $row['contract'] ?></td> 
 
\t \t \t <td><?php echo (round($row['value1'], 2)) ?></td> 
 
\t \t \t <td><?php echo (round($row['value2'],2)) ?></td> 
 
\t \t \t <td><?php echo ((round($sold, 2))+0) ?></td> 
 
\t </tr><?php } } ?> 
 
    </tbody>

我发现一些代码隐藏所有行，它具有空单元格，但它不是我想要的。 Thx寻求帮助。

$(document).ready(function() { 
 
    $("#gdRows td").each(function() { 
 
     var cellText = $(this).text(); 
 
     if ($.trim(cellText) == '') { 
 
      $(this).css('background-color', 'cyan'); 
 
     } 
 
    }); 
 

 
    $('#btnHide').click(function() { 
 
     $("#gdRows tr td").each(function() { 
 
      var cell = $.trim($(this).text()); 
 
      if (cell.length == 0) { 
 
       $(this).parent().hide(); 
 
      } 
 
     }); 
 
    }); 
 
    $('#btnReset').click(function() { 
 
     $("#gdRows tr").each(function() { 
 
      $(this).show(); 
 
     }); 
 
    }); 
 
});

Answer 1

类添加到那些细胞，为了简化

<td class="sold"><?php echo ((round($sold, 2))+0) ?></td> 

然后使用filter()

$("td.sold").filter(function() {   
    return +$(this).text().trim() === 0;   
}).parent().hide(); 

---

你也可以通过添加hidden类行做同样的事情在PHP如果$sold为零，并添加CSS规则hidden类

PHP

<tr class="<?= $sold == 0 ? 'hidden' :'';?>"> 

Answer 2

下面的函数将在所有<tr>环在表中找到行内的第4个单元格。如果该单元格包含的值为零，则该行将变为隐藏状态。

$("table tr").each(function() { 
 
    var sold = $(this).find(":nth-child(4)"); 
 
    if (parseFloat(sold.text()) === 0) 
 
    $(this).hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>Contract</td> 
 
    <td>123</td> 
 
    <td>456</td> 
 
    <td>789</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Contract</td> 
 
    <td>123</td> 
 
    <td>456</td> 
 
    <td>0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Contract</td> 
 
    <td>0.123</td> 
 
    <td>0.456</td> 
 
    <td>0.0</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Contract</td> 
 
    <td>0.123</td> 
 
    <td>0.456</td> 
 
    <td>0.789</td> 
 
    </tr> 
 
</table>