根据html表格单元格值隐藏行

时间:2015-10-12 16:03:42

标签: javascript php jquery html

我有一个显示数据库数据的表,我有一个具有简单算术功能的单元格。 我想隐藏总和结果为零的整行(如果$ sold值为零)。



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

我找到了一些代码来隐藏它有空单元格的所有行,但它不是我想要的。求助。

&#13;
&#13;
$(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();
        });
    });
});
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分: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类,并为hidden类添加一个css规则

PHP

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

答案 1 :(得分:1)

以下函数将遍历表中的所有<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>