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();
    });
  }
});

Hmm更改问题：将jQuery(".table tbody tr")放入函数后似乎有效。我无法在JSFiddle中重现它，但here是我的尝试。

我的问题归结为：这段代码实际上是否有效，或者只是看起来像它，我该如何改进它？

Answer 1

N种可能的方式之一，代码更改很少......

CSS

.tableBalance-NonZeroes tr {
    display: none
}

JS

var tableBalance = $(".tableBalance");
$("#onlyNonZeroes").change(function () {
    tableBalance.toggleClass("tableBalance-NonZeroes", this.checked);
    if (this.checked) {
        $(tableBalance).find("span.balance").each(function (index, element) {
            var jElement = $(element);
            jElement.parent().parent().toggle(parseFloat(jElement.text() > 0));
        });
    }
});

Answer 2

试试这个：

 $('#onlyNonZeroes').click(function(e){
var elem = this;
    $('.balance').each(function(ind,val){
        if(elem.checked){
            if($(this).text()=="0.00"){
                $(this).parent().css({
                    'display':'none', 
                });
            }   
        } else{
             $(this).parent().css({
                'display':'block', 
            });
        }
    });

}）;

演示here

Answer 3

工作小提琴：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;
}

Answer 4

尝试这样的事情：

$('#onlyNonZeroes').change(function () {
    $('td').each(function (i, e) {
        if ($(e).find('.balance').text() == '0.00') {
            $(e).parent().toggleClass('hide');
        }
    });
});

hide班级只有display:none

DEMO

Answer 5

每次复选框changes，loop through的值包含＆＃34; 0.00＆＃34;根据复选框的当前值显示hide/show。

要从表格单元格中获取行，只需在单元格上调用parent即可。

jsFiddle

$(function() {
    $("#onlyNonZeroes").change(function() {
        $(".balance").each(function() {
            if ($(this).text().match(/^\s*0.00\s*$/)) {
                $(this).parent().toggle(!$("#onlyNonZeroes")[0].checked);
            }
        });
    });
});

Answer 6

试试这个脚本：

$("#onlyNonZeroes").change(function () {

    var nonZeroCheckboxIsChecked = $("#onlyNonZeroes").is(":checked");
    if (nonZeroCheckboxIsChecked) {
        $("table tbody tr").each(function () {
            $row = $(this);
            if ($row.text().trim() == "0.00") {
                $row.hide();
            } else {
                $row.show();
            }
        });
    } else {
        $("table tbody tr").each(function () {
            $row = jQuery(this);
            $row.show();
        });
    }
});

工作Fiddle。

<强>解释

首先删除表前的.。然后直接使用它将返回相同的行的文本。然后在检查之前修剪该值，以便在我们可以检查已修剪的字符串之前删除多余的空格。

如果td：nthchild（2）包含0.00值，如何隐藏表中的行？

6 个答案: