Question

我有三个类型为“一”，“二”和“三”的复选框和一个表正在将列作为“类型”，其中包含三个不同的值，分别为几行，一个，两个和三个。
我的要求是，根据选中或取消选中的复选框，只显示表格中那些“类型”列的值与复选框值匹配的行。

For example,

如果选中“One”复选框，则应显示“One”作为Type的行如果选择“一”和“三”，则应显示那些具有“一”和“三”类型的行。
如果取消选择“Three”，则应隐藏匹配“Three”作为Type的行，仅显示Type“One”的行，依此类推。

但是，我无法产生预期的结果，附上下面的代码，任何人都可以帮忙。

 <html>

<head>
    <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.    min.js"></script>
    <title>Hello </title>
</head>

<body>
<table>
    <tr>
        <td>
<input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "One" />
                 One
     </td>
    <td>
<input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "Two" />
                 Two
    </td>
    <td>
<input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "Three" />
                 Three
    </td>
    </tr>
 </table>

 <table class="datatbl"  border=1>
    <tr>
        <th>No.</th>
        <th>Content</th>
        <th>Type</th>
    </tr>
    <tr>
        <td>1</td>
        <td>this is first row</td>
        <td>One</td>
    </tr>
    <tr>
        <td>2</td>
        <td>this is second row</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>3</td>
        <td>this is third row</td>
        <td>Three</td>
    </tr>
    <tr>
        <td>4</td>
        <td>this is fourth row</td>
        <td>One</td>
    </tr>
    <tr>
        <td>5</td>
        <td>this is fifth row</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>6</td>
        <td>this is sixth row</td>
        <td>Three</td>
    </tr>

</table>
<style>
.datatbl {
background-color: palegreen;
}
</style>
<script>
function filter_type(box) {
//alert("checked");
 var cbs = document.getElementsByTagName('input');
 var all_checked_types = [];
 for(var i=0; i < cbs.length; i++) {
     if(cbs[i].type == "checkbox") {
             if(cbs[i].name.match(/^filter/)) {
                     if(cbs[i].checked) {
                         all_checked_types.push(cbs[i].value);
                      }
                  }
           }
  }
 //alert("all checked "+ all_checked_types);
 if (all_checked_types.length > 0) {
     $('.datatbl tr').each(function (i, row) {
         var $tds = $(this).find('td'),
         type = $tds.eq(2).text();
         if (type && all_checked_types.indexOf(type) >= 0) {
             //alert("matched");
             $(this).show();
          }
      });
  }
    else {
        $('.datatbl tr').each(function (i, row) {
            var $tds = $(this).find('td'),
            type = $tds.eq(2).text();
            $(this).show();
         });
    }
    return true;
 }  

</script>

</body>
</html>

function filter_type(box) {
//alert("checked");
 var cbs = document.getElementsByTagName('input');
 var all_checked_types = [];
 for(var i=0; i < cbs.length; i++) {
	 if(cbs[i].type == "checkbox") {
        	 if(cbs[i].name.match(/^filter/)) {
                     if(cbs[i].checked) {
                         all_checked_types.push(cbs[i].value);
                      }
                  }
           }
  }
 //alert("all checked "+ all_checked_types);
 if (all_checked_types.length > 0) {
     $('.datatbl tr').each(function (i, row) {
         var $tds = $(this).find('td'),
         type = $tds.eq(2).text();
         if (type && all_checked_types.indexOf(type) >= 0) {
             //alert("matched");
             $(this).show();
          }
      });
  }
    else {
        $('.datatbl tr').each(function (i, row) {
            var $tds = $(this).find('td'),
            type = $tds.eq(2).text();
            $(this).show();
         });
    }
    return true;
}

.datatbl {
background-color: palegreen;
}

<html>

<head>
	<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.	min.js"></script>
	<title>Hello </title>
</head>

<body>
<table>
	<tr>
		<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "One" />
                 One
	 </td>
	<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "Two" />
                 Two
	</td>
	<td>
<input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "Three" />
                 Three
	</td>
 	</tr>
 </table>

 <table class="datatbl"  border=1>
	<tr>
		<th>No.</th>
		<th>Content</th>
		<th>Type</th>
	</tr>
	<tr>
		<td>1</td>
		<td>this is first row</td>
		<td>One</td>
	</tr>
	<tr>
		<td>2</td>
		<td>this is second row</td>
		<td>Two</td>
	</tr>
	<tr>
		<td>3</td>
		<td>this is third row</td>
		<td>Three</td>
	</tr>
	<tr>
		<td>4</td>
		<td>this is fourth row</td>
		<td>One</td>
	</tr>
	<tr>
		<td>5</td>
		<td>this is fifth row</td>
		<td>Two</td>
	</tr>
	<tr>
		<td>6</td>
		<td>this is sixth row</td>
		<td>Three</td>
	</tr>

</table>



</body>
</html>

Answer 1

我使用此剪辑：

jQuery(document).on('ready', function() {
    var filter_magic = function(e) {
        var trs = jQuery('.datatbl tr:not(:first)');

        trs.hide();
        var showAll = true;
        jQuery('input[type="checkbox"][name="filter"]').each(function() {
            if (jQuery(this).is(':checked')) {
                var val = jQuery(this).val();
                trs.each(function() {
                    var tr = jQuery(this);
                    var td = tr.find('td:nth-child(3)');
                    if (td.text() === val) {
                        tr.show();
                        showAll = false;
                    }
                });
            }
        });
        if (showAll) {
            trs.show();
        }
    };

    jQuery('input[type="checkbox"][name="filter"]').on('change', filter_magic);
    filter_magic();
});

然后，您只需从html中删除onclick='return filter_type(this);'内容。

它确实显示已选中复选框的行，如果未选择任何内容则显示所有行。如果不期望这种行为，只需将var showAll = true;更改为var showAll = false;

这是一个演示：https://jsfiddle.net/njuzzv6L/2/

Answer 2

作为 Ahs N 的答案：

$("input[type='checkbox']").click(function() {

    var vArr = [];

    $(":checked").each(function() {
        vArr.push($(this).attr("value").toLowerCase());
    });

    $("table:last-child tr").slice(1).each(function() {
        if ($.inArray($(this).find("td").last().text().toLowerCase(), vArr) < 0 || vArr.length == 0) {
            if($(this).is(':visible')) 
                $(this).fadeOut(); //OR $(this).hide();
        }
        else 
            if( !$(this).is(':visible'))
                $(this).fadeIn(); //OR $(this).show();
    });


});

Here is the JSFiddle demo version 2

Answer 3

给复选框一个类.chkbox

$(".chkbox").click(function(){
  var chkboxs = [];
  $.each(".chkbox",function(i,field){
   if(new jQuery(field).prop('checked'))
    chkboxs.push(new jQuery(field).val());
  });
  $.each(".datatbl tr",function(i,field){
   if($.inArray(new jQuery(field).find('td:last').text(),chkboxs))
    new jQuery(field).show();
   else 
    new jQuery(field).hide();
  });
});

Answer 4

我选择不提供替代编码 - 但是要说明如何使自己的代码有效。

首先，它的良好做法是在整个编码中保持统一 - 这意味着在你的html中你的属性被不一致地引用（单一与双重），或者在某些情况下根本没有引用。由于javascript在定位元素方面可能很挑剔，因此首先要查找不洁和/或不统一的html总是好的。

您的html ID输入标记不是唯一的。 ID标签必须是唯一的。

最后，我在你的脚本中添加了一个“else”语句，所以如果它没有“显示”，那么“隐藏”这些行。

    <html>
    <head>
    <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <title>Hello </title>

    <style>
        .datatbl {
            background-color: palegreen;
        }
    </style>


   <script>
     function filter_type(box) {
    //alert("checked");
     var cbs = document.getElementsByTagName('input');
     var all_checked_types = [];
     for(var i=0; i < cbs.length; i++) {
         if(cbs[i].type == "checkbox") {
                 if(cbs[i].name.match(/^filter/)) {
                         if(cbs[i].checked) {
                             all_checked_types.push(cbs[i].value);
                          }
                      }
               }
      }

     if (all_checked_types.length > 0) {
         $('.datatbl tr:not(:has(th))').each(function (i, row) {
             var $tds = $(this).find('td'),
             type = $tds.eq(2).text();
             if (type && all_checked_types.indexOf(type) >= 0) {
                 $(this).show();
              }else{
                 $(this).hide();
              }
          });
      }else {
            $('.datatbl tr:not(:has(th))').each(function (i, row) {
                var $tds = $(this).find('td'),
                type = $tds.eq(2).text();
                $(this).show();
             });
    }
    return true;
 }  

</script>



</head>

<body>
<table>
    <tr>
        <td>
            <input type="checkbox" onclick="return filter_type(this);" name="filter"  id="One"  value= "One" />
                 One
        </td>
    <td>
        <input type="checkbox" onclick="return filter_type(this);" name="filter"  id="Two"  value= "Two" />
                 Two
    </td>
    <td>
    <input type="checkbox" onclick="return filter_type(this);" name="filter"  id="Three"  value= "Three" />
                 Three
    </td>
    </tr>
 </table>

 <table class="datatbl"  border="1">
    <thead>
        <tr>
            <th>No.</th>
            <th>Content</th>
            <th>Type</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>this is first row</td>
            <td>One</td>
        </tr>
        <tr>
            <td>2</td>
            <td>this is second row</td>
            <td>Two</td>
        </tr>
        <tr>
            <td>3</td>
            <td>this is third row</td>
            <td>Three</td>
        </tr>
        <tr>
            <td>4</td>
            <td>this is fourth row</td>
            <td>One</td>
        </tr>
        <tr>
            <td>5</td>
            <td>this is fifth row</td>
            <td>Two</td>
        </tr>
        <tr>
            <td>6</td>
            <td>this is sixth row</td>
            <td>Three</td>
        </tr>
    </tbody>
</table>

</body>
</html>

Answer 5

固溶：

＆＃13;

			function filter_type(box) {
			 var cbs = document.getElementsByTagName('input');
			 var all_checked_types = [];
			 for(var i=0; i < cbs.length; i++) {
				 if(cbs[i].type == "checkbox") {
						 if(cbs[i].name.match(/^filter/)) {
								 if(cbs[i].checked) {
									 all_checked_types.push(cbs[i].value);
								  }
							  }
					   }
			  }
			 if (all_checked_types.length > 0) {
				 $('#datatbl tr').each(function (i, row) {
					 var $tds = $(this).find('td')
					 if ($tds.length) {
						var type = $tds[2].innerText;
						console.log(type)
						if(!(type && all_checked_types.indexOf(type) >= 0)) {
							$(this).hide();
						 }
						 else {
							$(this).show();
						 }
					  }
				  });
				  
			  }
				else {
					$('#datatbl tr').each(function (i, row) {
						var $tds = $(this).find('td'),
						type = $tds.eq(2).text();
						$(this).show();
					 });
				}
				return true;
			}

＆＃13;

#datatbl {
			background-color: palegreen;
		}

＆＃13;

<html>
	<head>
		<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<title>Hello </title>
	</head>

	<body>
		<table>
			<tr>
				<td>
					<input type='checkbox' onclick='return filter_type(this);' name='filter'  id="One"  value= "One" />One
				</td>
				<td>
					<input type='checkbox' onclick='return filter_type(this);' name='filter'  id="Two"  value= "Two" />Two
				</td>
				<td>
					<input type='checkbox' onclick='return filter_type(this);' name='filter'  id="Three"  value= "Three" />Three
				</td>
			</tr>
		 </table>

		 <table id="datatbl" border=1>
			<tr>
				<th>Unique Id.</th>
				<th>Content</th>
				<th>Type</th>
			</tr>
			<tr>
				<td>1</td>
				<td>this is first row</td>
				<td>One</td>
			</tr>
			<tr>
				<td>2</td>
				<td>this is second row</td>
				<td>Two</td>
			</tr>
			<tr>
				<td>3</td>
				<td>this is third row</td>
				<td>Three</td>
			</tr>
			<tr>
				<td>4</td>
				<td>this is fourth row</td>
				<td>One</td>
			</tr>
			<tr>
				<td>5</td>
				<td>this is fifth row</td>
				<td>Two</td>
			</tr>
			<tr>
				<td>6</td>
				<td>this is sixth row</td>
				<td>Three</td>
			</tr>

		</table>
		
	</body>

</html>

＆＃13;

Answer 6

我就这样做了：

$("input[type='checkbox']").click(function() {
  $("tr").fadeIn();

  if ($(":checked").length > 0) {
    var vArr = [];

    $(":checked").each(function() {
      vArr.push($(this).attr("value").toLowerCase());
    });

    $("table:last-child tr").slice(1).each(function() {
      if ($.inArray($(this).find("td").last().text().toLowerCase(), vArr) < 0) {
        $(this).fadeOut();
      }
    });
  }

});

Here is the JSFiddle demo

Answer 7

我看到你已经选择了一个答案，但我觉得有必要提出一个不太复杂的解决方案：如果选中则显示行，如果未选中则显示NOT。

我从标记中删除了代码。

我将代码简化为更改操作事件处理程序。

$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  cbs.each(function() {
    var mycheckbox = $(this);
    var isChecked = mycheckbox[0].checked;
    $('.datatbl tr').not(":eq(0)").filter(function() {
        return $(this).find('td').eq(2).text() == mycheckbox.val();
    }).toggle(isChecked);
  });
});

与此相关的修订复选框标记：

<input type='checkbox' name='filter' id="One" value="One" />

替代战略：

在我看来，这仍然不是超级明确的，所以这里是使用数据属性的修订，而不是某些列中的＆＃34;文本＆＃34;这可能很脆弱。

$('.checkcontainer').on('change', 'input[type="checkbox"]', function() {
  var cbs = $('.checkcontainer').find('input[type="checkbox"]');
  cbs.each(function() {
    var mycheckbox = $(this);
    $('.datatbl tr').filter(function() {
        return $(this).data('rowtype') == mycheckbox.val();
    }).toggle(mycheckbox[0].checked);
  });
});

最后一次代码更改的修改标记剪辑示例：

<tr data-rowtype="Three">
   <td>3</td>
   <td>this is third row</td>
   <td>Three is here does not matter</td>
</tr>

注意：如果您只是在任何复选框上触发更改事件，则其中任何一个都将设置初始状态（隐藏显示），并为所有这些复选框设置。把它放在准备好的文档中，你就可以了。

 $('.checkcontainer').find('input[type="checkbox"]').eq(0).trigger('change');

这是一个你可以看到它的小提琴：https://jsfiddle.net/6Lk4om0u/

如何根据选中的复选框显示表格行

7 个答案: