基於選擇值篩選表格行

我需要根據選擇值篩選表格行。當選定值爲「」（空）時，表必須隱藏。如果選擇值是讓我們說1，表必須是可見的，並且它必須只顯示第一個表列中的值爲1的行。基於選擇值篩選表格行

問題是此id列存放多個id，如1,2。因爲我JQuery的技能是不是最好的我需要你們幫我完成我的代碼

我選擇

<select id='mySelector'> 
    <option value="">Please Select</option> 
    <option value='1'>A</option> 
    <option value='2'>B</option> 
    <option value='3'>C</option> 
</select>

我的表

<table id='myTable'> 
    <thead> 
     <tr> 
     <th>ids</th> 
     <th>name</th> 
     <th>address</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>1,2</td> 
     <td>Jhon</td> 
     <td>Doe</td> 
     </tr> 
     <tr> 
     <td>3</td> 
     <td>Mike</td> 
     <td>Poet</td> 
     </tr> 
     <tr> 
     <td>2,3</td> 
     <td>Ace</td> 
     <td>Ventura</td> 
     </tr> 
    </tbody> 
</table>

我的腳本

$(document).ready(function($) { 
    $('table').hide(); 
    $('#mySelector').change(function(){ 
     $('table').show(); 
     var selection = $(this).val(); 
     var dataset = $('#myTable').find('tr'); 
      $.each(dataset, function(index, item) { 
      //help 
      }); 
    }); 
});

這裏是工作plunker

如果您需要任何其他信息，請讓我知道，我會提供。先謝謝你。

來源

2017-01-09 Valor_

你有控制標記嗎？例如，您可以更改表格標記嗎？如果你可以在標記中添加一些屬性，這將會更簡單：例如''。 –

是的，我有控制標記 –

可以過濾基礎上，td的內容包含ID S中的行：

你數據集必須是$('#myTable tbody').find('tr')所以taht它不顯示/隱藏thead
首先顯示全部表tr s使用dataset.show()

現在篩選tr是你們等不需要顯示使用此：

dataset.filter(function(index, item) { 
    return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1; 
}).hide();

請參見下面的演示：

$(document).ready(function($) { 
 
    $('table').hide(); 
 
    $('#mySelector').change(function() { 
 
    $('table').show(); 
 
    var selection = $(this).val(); 
 
    var dataset = $('#myTable tbody').find('tr'); 
 
    // show all rows first 
 
    dataset.show(); 
 
    // filter the rows that should be hidden 
 
    dataset.filter(function(index, item) { 
 
     return $(item).find('td:first-child').text().split(',').indexOf(selection) === -1; 
 
    }).hide(); 
 

 
    }); 
 
});

/* Styles go here */ 
 

 
table { 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 
th, 
 
td { 
 
    padding: 8px; 
 
    text-align: left; 
 
    border-bottom: 1px solid #ddd; 
 
} 
 
.styled-select.slate { 
 
    height: 34px; 
 
    width: 240px; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<script src="script.js"></script> 
 

 
<select id='mySelector' class="styled-select slate"> 
 
    <option value="">Please Select</option> 
 
    <option value='1'>A</option> 
 
    <option value='2'>B</option> 
 
    <option value='3'>C</option> 
 
</select> 
 
<br> 
 
<br> 
 
<br> 
 
<table id='myTable'> 
 
    <thead> 
 
    <tr> 
 
     <th>ids</th> 
 
     <th>name</th> 
 
     <th>address</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1,2</td> 
 
     <td>Jhon</td> 
 
     <td>Doe</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Mike</td> 
 
     <td>Poet</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2,3</td> 
 
     <td>Ace</td> 
 
     <td>Ventura</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-01-09 18:23:08 kukkuz

我喜歡解釋槽代碼和解決方案！謝謝 –

嘗試使用代碼如下

$("#mySelector").on("change", 
      function(){ 
       var a = $(this).find("option:selected").html(); 

       $("table tr td:first-child").each(
        function(){ 
         if($(this).html() != a){ 
          $(this).parent().hide(); 
         } 
         else{ 
          $(this).parent().show(); 
         } 
        }); 
      });

來源

2017-01-09 18:24:44 GSB

這裏，你可以使用:contains()選擇測試here

$(function() { 
    $('table').hide(); 
    $('#mySelector').change(function(){ 
     $('table').show(); 
     var selection = $(this).val(); 
     var dataset = $('#myTable').find('tr'); 

     dataset.each(function(index) { 
     item = $(this); 
     item.hide(); 

     var firstTd = item.find('td:first-child'); 
     var text = firstTd.text(); 
     var ids = text.split(','); 

     for (var i = 0; i < ids.length; i++) 
     { 
      if (ids[i] == selection) 
      { 
      item.show(); 
      } 
     } 
     }); 
    }); 
});

來源

2017-01-09 18:27:19

簡短的解決方案解決：

$(document).ready(function($) { 
    $('table').hide(); 

    $('#mySelector').change(function(){ 
     var selection = $(this).val(); 
     $('table')[selection? 'show' : 'hide'](); 

     if (selection) { // iterate only if `selection` is not empty 
     $.each($('#myTable tbody tr'), function(index, item) { 
      $(item)[$(item).is(':contains('+ selection +')')? 'show' : 'hide'](); 
     }); 
     } 

    }); 
});

測試環節：https://plnkr.co/edit/zNQNFVBIPSyPjEyU7I1J?p=preview

http://api.jquery.com/contains-selector/

來源

2017-01-09 18:29:20 RomanPerekhrest

基於選擇值篩選表格行

回答

相關問題