從<select>使用jQuery輸入的篩選器表

我試圖從使用jQuery的字母輸入<select>輸入中篩選表。從<select>使用jQuery輸入的篩選器表

我在表格的兩列中有名字和姓氏，我想通過其中任何一個過濾行。

我有一個選擇輸入設置爲這樣：

<select> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    ... 
</select>

，我想過濾此表：

<tr> 
    <td>Joe</td> 
    <td>Schmoe</td> 
    <td>$2482.79</td> 
    <td>172.78.200.124</td> 
    <td>http://gmail.com</td> 
</tr> 
<tr> 
    <td>John</td> 
    <td>Doe</td> 
    <td>$2776.09</td> 
    <td>119.232.182.142</td> 
    <td>http://www.example.com</td> 
</tr>

我怎麼會去篩選使用jQuery表？

來源

2009-07-08 peehskcalba

以名字過濾它們？ – 2009-07-08 19:29:58

這將工作假設你只有一個選擇和被stuctured喜歡你的例子

$(document).ready(function($) { 
    var rows = $('table tr').each(function() { 
     var row = $(this); 
     var columns = row.children('td'); 

     row.data('name-chars', [ 
      columns.eq(0).html()[0].toUpperCase(), 
      columns.eq(1).html()[0].toUpperCase(), 
     ]); 
    }); 

    $('select').change(function() { 
     var char = $(this).val().toUpperCase(); 

     rows.each(function() { 
      var row = $(this); 
      var chars_to_match = row.data('name-chars'); 
      if($.inArray(char, chars_to_match) > -1) { 
       row.show(); 
      } 
      else { 
       row.hide(); 
      } 
     }); 
    }); 
});

來源

2009-07-08 19:46:45 howardr

試試這個。如有必要，用$（y）代替y。

$('tr').hide(); 
$('select').change(function(){ 
    var letter = $(this).val(); 
    var dataset = $('#tableID').find('td'); 
    $.each(dataset, function(x, y){ 
     if(y.substr(0,1) == letter){ 
      y.parent().show(); 
     } 
    }); 
});

編輯

@SolutionYogi。你是對的。我想這條線可以重寫爲：

var dataset = $('#tableID').find('tr').children('td').slice(0,1);

雖然沒有嘗試過。

編輯2

我測試此。我希望已經足夠優雅，而且我沒有更多的錯誤。

$('tr').hide(); 
$('select').change(function(){ 
    var letter = $(this).val(); 
    var dataset = $('#tableID').find('tr'); 
     $.each(dataset, function(x, y){ 
      var data = $(y).children().slice(0,2); 
       $.each(data, function(a, b){ 
        if($(b).html().substr(0,2) == letter){ 
         $(b).parent().show(); 
        } 
      }); 
     }); 
});

來源

2009-07-08 19:37:23

你的代碼搜索的所有列，而作者所要搜索只在前兩列。 – SolutionYogi 2009-07-08 19:55:33

不會代碼只搜索第一行的前兩個單元格？ – SolutionYogi 2009-07-08 20:13:26

如果你的表的id是SEL，桌子是標籤，這將這樣的伎倆。更改eq（0）更改要查找的列。選擇框中的空值將重新顯示所有trs。

var selSelection = $("#sel").val(); 
if(!selSelection) $("#tab tr").show(); 
else $("#tab tr").show().filter(function(index){ 
    return $("td:eq(0)", this).html().indexOf(selSelection) == -1; 
}).hide();

來源

2009-07-08 19:41:25 AKX

我想出了這個表。與埃爾佐想出的很相似，但它限制在表格的前兩列。

$('select').change(function(e) { 
    var letter = $(this).val(); 
    if (letter === 'ALL') { 
     $ ('tr').show(); 
    } 
    else { 
     $('tr').each(function(rowIdx,tr) { 
      $(this).hide().find('td').each(function(idx, td) { 
       if(idx === 0 || idx === 1) { 
        var check = $(this).text(); 
        if (check && check.indexOf(letter) == 0) { 
         $(tr).show(); 
        } 
       } 
      });    

     }); 
    }    
});

它不會忽略大小寫，並假設你有一個選擇，並在頁面上只有TR的是要篩選的人。

編輯增加了一個「全部」選項再次顯示行。

來源

2009-07-08 19:51:31 seth

$（「TD：沒有（：包含（ '」 +將input_value + 「'））」），刪除（）;

這是區分大小寫的......具體是什麼，你試圖篩選呢？

來源

2009-07-08 19:58:41 webwires

從<select>使用jQuery輸入的篩選器表

回答

相關問題