堆棧內存溢出
  簡體   English   中英

如何根據選中的復選框顯示表行

[英]How to show table rows based on checkbox selected

 原文  2016-01-28 13:15:48  8   7    javascript/ jquery/ html/ css

問題描述

我有三個類型為“一個”，“第二個”和“三個”的復選框，以及一個表，其中的一列為“類型”，該表包含幾個行中的三個不同的值“一”，“二”和“三”。
我的要求是，基於選中或取消選中的復選框，僅應顯示表中“類型”列的值與復選框值相匹配的那些行。

For example,

如果選中復選框“一個”，則應顯示那些以“一個”作為類型的行。
如果同時選擇“一個”和“三個”，則應顯示那些類型為“一個”和“三個”的行。
再次，如果取消選擇“三”，則應隱藏與“三”匹配為“類型”的行，僅顯示“一”類型的行，依此類推。

但是，我無法產生預期的效果，請附上以下代碼，請任何人幫助。 

 <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>

7 個解決方案

解決方案1
 2 已采納  2016-01-28 13:49:27

我將使用此片段： 

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

然后，您只需刪除onclick='return filter_type(this);' html中的內容。

它確實顯示了已選中復選框的行，並且如果未選擇任何內容，則顯示所有行。 如果不希望出現這種情況， var showAll = true;更改var showAll = true; 到var showAll = false;

這是一個演示： https : //jsfiddle.net/njuzzv6L/2/

解決方案2
 2  2016-01-28 14:28:55

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


});

這是JSFiddle演示版本2

解決方案3
 1  2016-01-28 13:43:29

給復選框一個類.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();
  });
});

解決方案4
 1  2016-01-28 14:03:55

我選擇不提供替代編碼-而是展示如何使自己的代碼起作用。

首先，它的優良作法是在整個編碼過程中保持統一-意味着在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>

解決方案5
 1  2016-01-28 14:04:26

解決方案： 

  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; } 
 #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="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>

解決方案6
 0  2016-01-28 13:49:11

這是我的方法： 

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

});

這是JSFiddle演示

解決方案7
 0  2016-01-28 16:34:33

我看到您已經選擇了一個答案，但是我不得不采用不太復雜的解決方案：如果選中則顯示行，如果未選中則顯示行。

我從標記中刪除了代碼。

我將代碼簡化為更改操作事件處理程序。 

$('.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" />

替代策略：

我認為這仍然不是超級確定的，因此這是使用數據屬性而不是可能脆弱的“某些列中的文本”的修訂。 

$('.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/

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 根據復選框隱藏/顯示表行 如何根據選中的復選框驗證表值 如何使用JavaScript刪除基於復選框列的html表的選定行 根據JSP中的復選框值隱藏/顯示表行 如何對 HTML 表格中的復選框中的選定行執行操作 如何根據URL參數顯示表行 jQuery隱藏和顯示基於所選復選框的文本 根據選中的復選框顯示/隱藏表單的一部分？ 選中復選框時隱藏表中的其他行 如何根據javascript中的復選框選擇顯示表格行
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM