javascript - 如果 td :nthchild(2) contains 0. 00 值，如何隐藏表中的行？

Question

我有一个表和 jQuery。我想要发生的是，当选中一个复选框时，td 中包含值 0.00 的行被隐藏。顶部带有复选框的表格如下所示:

<div class="checkbox">
  <label>
    <input type="checkbox" id="onlyNonZeroes">
    Hide 0.00 values
  </label>
</div> 

<table>
  <tbody>
    <tr>
      <td>
      </td>
      <td>
        <span class="balance">0.00</span>
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        <span class="balance">1.00</span>
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        <span class="balance">0.00</span>
      </td>
    </tr>
    </tbody>
</table>

为了隐藏 0.00 值，我编写了以下代码(请耐心等待，我目前还不太擅长):

// If the onlyNonZeroes checkbox is checked we hide the rows that have 0.00 values
jQuery("#onlyNonZeroes").change(function () {
  var nonZeroCheckboxIsChecked = jQuery("#onlyNonZeroes").is(":checked");
  if (nonZeroCheckboxIsChecked) {
    $(".table tbody tr").each(function () {
      $row = $(this);
      var second = $row.find("td:nth-child(2)").text();
      if (second == 0.00) {
        $row.hide();
      }
      else {
        $row.show();
      }
    });
  }
  else {
    jQuery(".table tbody tr").each(function () {
      $row = jQuery(this);
      $row.show();
    });
  }
});

嗯，问题的变化:在将 jQuery(".table tbody tr") 放入函数后似乎可以正常工作。我无法在 JSFiddle 中重现它，但是 here是我的尝试。

我的问题归结为:这段代码是真的有效还是只是看起来像，我该如何改进它？

Answer 1

工作 fiddle :http://jsfiddle.net/LYy3g/

您还需要检查复选框是否被选中，并根据您隐藏/显示行

$(document).on("change", "#onlyNonZeroes", function () {
    if ($(this).is(":checked")) {
        $('.balance').each(function (k, element) {
            if ($(element).html() == "0.00") {
                $(element).addClass("hiderow");
            }
        });
    } else {
        $('.balance').removeClass("hiderow");
    }
});

CSS:

.hiderow {
    display: none;
}