Question

我有一个包含数据列表的表。例如，它有一个如下图所示的数据。我想隐藏在总共列下显示$ 0.00的任何行。我写下面的jQuery循环并显示每行最后一行的警报，我无法完成。

如何让jQuery通过最后一栏并检查字段是否有$ 0.00值隐藏它的整行？

例如，在下图中，不应显示汽油，零售和批发，因为所有这些都在总计部分中的价值为0.00美元。

我写的jQuery示例

$('#table tr td:last-child').each(function(){
alert("abc");
})

图片中的示例表代码

<tbody class="vt-section">
            <!--Title-->
            <tr data-holder="top_title" class="top_title">
                <th class="title">Income</th>
            <th class="title thSection">July<br>2016</th><th class="title thSection">August<br>2016</th><th class="title thSection">September<br>2016</th><th class="title undefined">TOTALS</th></tr>
            <!--Data-->
            <tr data-holder="inc_food">
                <th class="vt-label-un">Food</th>
            <td undefined="">$26,542.00</td><td undefined="">$25,955.00</td><td undefined="">$26,067.00</td><td class="bold">$78,564.00</td></tr>
            <tr data-holder="inc_non_food">
                <th class="vt-label-un">Non-Food</th>
            <td undefined="">$3,507.00</td><td undefined="">$3,020.00</td><td undefined="">$3,054.00</td><td class="bold">$9,581.00</td></tr>
            <tr data-holder="inc_gasoline">
                <th class="vt-label-un">Gasoline</th>
            <td undefined="">$0.00</td><td undefined="">$0.00</td><td undefined="">$0.00</td><td class="bold">$0.00</td></tr>
            <tr data-holder="inc_retail">
                <th class="vt-label-un">Retail</th>
            <td undefined="">$0.00</td><td undefined="">$0.00</td><td undefined="">$0.00</td><td class="bold">$0.00</td></tr>
            <tr data-holder="inc_wholesale">
                <th class="vt-label-un">Wholesale</th>
            <td undefined="">$0.00</td><td undefined="">$0.00</td><td undefined="">$0.00</td><td class="bold">$0.00</td></tr>
            <!--Totals-->
            <tr data-holder="inc_total_sales">
                <th class="vt-label-un bold">Total Sales</th>
            <td class="incTotal">$30,049.00</td><td class="incTotal">$28,975.00</td><td class="incTotal">$29,121.00</td><td class="incFinal red bold">$88,145.00</td></tr>
            </tbody>

以下是生成表格的部分

$('#resultForm').on('submit', function (e) {
    e.preventDefault();

    var start = $('#start').val();
    var end = $('#end').val();
    var company = $('#company').val();

    // Add company and date at top
    $("#infoCompany").html(company);
    $("#infoDates").html(start+" - "+end);

    getData(start, end, company);

    // Remove $0.00 fields from the list
    $('.bold').filter(function(){
        return this.innerHTML.trim() === '$0.00';
    }).closest('tr').hide();
})

谁曾将此标记为另一个主题的答案，我实施了该解决方案，仍有0.00美元的回复。

以下是解释。

  // Remove $0.00 fields from the list
    $('#table tr').each(function() {
        var $erledigtCell = $(this).find("td").last().prev();
        var $row = $erledigtCell.parent();

        if($erledigtCell.text() == '$0.00'){
            $row.hide();
        } else {
            $row.show();
        }
    });

这里是getData的Ajax函数 / 通过Ajax /

检索数据

function getData(start, end, company) {

    $.ajax({
        url : '../src/processes/pl.php',
        type : 'POST',
        dataType : 'JSON',
        data : {
            start : start,
            end : end,
            company : company,
            method : 'massPL'
        },
        success: function (response) {
            data = response;
            addData()
        }
    })
}

Answer 1

$('.bold').filter(function(){
    return this.innerHTML.trim() === '$0.00';
}).closest('tr').hide();

找到所有html为$ 0.00的粗体元素，然后找到它们的父tr，并隐藏它们。

如果您从ajax调用返回html以重新加载页面，为了避免闪存，您可以在将数据附加到页面之前对数据执行此操作。

var $data = $(data);
$data.find('.bold').filter(function(){
    return this.innerHTML.trim() === '$0.00';
}).closest('tr').hide();
$data.appendTo('whatever');

Answer 2

试试这个 -

$("#table tr").each(function () {
    if($(this).find("td:last-child").text() == "$0.00") {
        $(this).hide();
    }
});

Answer 3

这样做：

$('.bold').each(function() {
  if ($(this).text() == "$0.00") $(this).parent().hide()
})

$('.bold').each(function() {
  if ($(this).text() == "$0.00") $(this).parent().hide()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody class="vt-section">
    <!--Title-->
    <tr data-holder="top_title" class="top_title">
      <th class="title">Income</th>
      <th class="title thSection">July
        <br>2016</th>
      <th class="title thSection">August
        <br>2016</th>
      <th class="title thSection">September
        <br>2016</th>
      <th class="title undefined">TOTALS</th>
    </tr>
    <!--Data-->
    <tr data-holder="inc_food">
      <th class="vt-label-un">Food</th>
      <td undefined="">$26,542.00</td>
      <td undefined="">$25,955.00</td>
      <td undefined="">$26,067.00</td>
      <td class="bold">$78,564.00</td>
    </tr>
    <tr data-holder="inc_non_food">
      <th class="vt-label-un">Non-Food</th>
      <td undefined="">$3,507.00</td>
      <td undefined="">$3,020.00</td>
      <td undefined="">$3,054.00</td>
      <td class="bold">$9,581.00</td>
    </tr>
    <tr data-holder="inc_gasoline">
      <th class="vt-label-un">Gasoline</th>
      <td undefined="">$0.00</td>
      <td undefined="">$0.00</td>
      <td undefined="">$0.00</td>
      <td class="bold">$0.00</td>
    </tr>
    <tr data-holder="inc_retail">
      <th class="vt-label-un">Retail</th>
      <td undefined="">$0.00</td>
      <td undefined="">$0.00</td>
      <td undefined="">$0.00</td>
      <td class="bold">$0.00</td>
    </tr>
    <tr data-holder="inc_wholesale">
      <th class="vt-label-un">Wholesale</th>
      <td undefined="">$0.00</td>
      <td undefined="">$0.00</td>
      <td undefined="">$0.00</td>
      <td class="bold">$0.00</td>
    </tr>
    <!--Totals-->
    <tr data-holder="inc_total_sales">
      <th class="vt-label-un bold">Total Sales</th>
      <td class="incTotal">$30,049.00</td>
      <td class="incTotal">$28,975.00</td>
      <td class="incTotal">$29,121.00</td>
      <td class="incFinal red bold">$88,145.00</td>
    </tr>
  </tbody>
</table>

这只是迭代每行中的最后一个单元格（类为粗体），检查单元格的文本内容，如果是$ 0.00则隐藏父行

while循环遍历每个tr中的最后一个td并有条件地隐藏整行

3 个答案: