Question

如果选中复选框（MyCheckbox），如何隐藏其第一个单元格内容为“aaa”的表（MyTable）的所有行，并在使用Jquery取消选中复选框（MyCheckbox）时显示行？

由于

Answer 1

尝试这样的事情：

$('#checkbox').click(function() {
    $('#table tr').each(function() {
        if ($(this).find('td:first-child').html() === 'aaa') {
            if ($('#checkbox:checked').val() === 'on')
                $(this).hide();
            else
                $(this).show();
        }
    });
});

Answer 2

这应该是诀窍。它将点击处理程序绑定到单击时触发的“MyCheckbox”。如果选中此框，它将遍历表中的每个td并检查文本。如果文字是“aaa”，则隐藏它。


$("#MyCheckbox").click(function(){
  if($(this).is(":checked")){
    $("tr td:first-child","#myTable").each(function(){
      if($(this).text() == "aaa"){
        $(this).closest("tr").hide();
      }
    });
  } else {
    $("tr td:first-child","#myTable").each(function(){
      if($(this).text() == "aaa"){
        $(this).closest("tr").show();
      }
    });  
  }
});

Answer 3

我愿意：http://jsfiddle.net/ABbCf/

$('#chk').click(function() {
    var table = $('#MyTable');
    var trs = $('#MyTable tr');
    trs.each(function() {
        if($(this).children().eq(0).text() === "aaa") {
            if($('#chk').attr("checked")) {
                $(this).hide();
            } else {
                $(this).show();
            }
        }
    });
});

Answer 4

$('.checkbox').click(function()
{
     var filter = this.value;
     if(this.checked)
     {
          $('table').find("td:contains(" + filter + ")").parent().hide();
     }else
     {
          $('table').find("td:not(:contains(" + filter + "))").parent().show();
     }
})

Answer 5

在此处试试：http://jsfiddle.net/saQwh/1/

$('input[type=checkbox]').click(function() {
    var theId = this.id;

    $("td").each(function() {
        if($(this).text() == theId) {
            $(this).parent().toggle();
        }        
    });
});

如何使用Jquery隐藏其第一个单元格内容为“aaa”的所有行？

5 个答案: