jQuery表格列搜索過濾器

我試圖在jQuery表格的特定列中搜索數據。我尋找不同的答案，但我找不到適合我的人。jQuery表格列搜索過濾器

表僅僅是一個簡單的：

<table id="tabla"> 
    <tr> 
    <th>TimeStamp</th> 
    <th>IP</th> 
    <th>Nombres</th> 
    <th>Descripción</th> 
    </tr> 
</table>

我發現了一段代碼，允許你搜索數據在整個表：

var $rows = $('#tabla_servicios tr'); 
      var $col_ip = $('#ip'); 

      $('#buscar1').keyup(function() { 

       var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

       $rows.show().filter(function() { 
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
        return !~text.indexOf(val); 
       }).hide(); 


      });

但我想搜索按列。

編輯：

這是我的第二個方法：

$('#buscar').click(function() { 

       var table = document.getElementById("tabla_servicios"); 
       var sel_opt = document.getElementById("options"); 
       var busqueda = $("#busqueda").prop("value"); 
       var column_sel = 0; 


       if (sel_opt.value == "timestamp"){ 

        //alert("opcion timestamp"); 
        column_sel = 0; 

       }else if (sel_opt.value == "ip"){ 

        //alert("opcion ip"); 
        column_sel = 1;     

       }else if (sel_opt.value == "nombres"){ 

        //alert("opcion nombres"); 
        column_sel = 2; 

       }else if (sel_opt.value == "descripcion"){ 

        //alert("opcion descripcion"); 
        column_sel = 3; 

       } 

       var column_length = $('#tabla_servicios tr th').length; 
       //alert("column_length = "+column_length); 
       var row_length = $('#tabla_servicios tr').length; 



       for(row=1; row<row_length; row++){ 

        var data=$('#tbody_tabla tr:eq('+row+') td:eq('+column_sel+')').text(); 
        //alert("busqueda: "+busqueda+" data: "+data); 

        if(busqueda == data){ 

         $('#tbody_tabla tr:eq('+row+')').remove(); 
         data.parent().css("font-size: 200%"); 
        } 

        } 


       });

但它不能正常工作，CSS代碼不工作，去除它只能排在我添加警告裏面的if。

來源

2015-09-22 sheilapbi

使用jQuery的數據表[鏈接]（ .html） –

你可以嘗試這樣的：

HTML：

<table id="tabla"> 
    <tbody id="tbody_tabla"> 
     <tr> 
     ---- 
     </tr> 
    </tbody> 
</table>

Jquery：

for(col=0;col<=column_length; col++){ 
    for(row=0; row<=row_length; row++){ 
     var data=$('#tbody_tabla tr:eq('+row+') td:eq('+col+')').text(); 
    } 
}

您也可以找到列的動態
例數和行數：https://www.datatables.net/examples/data_sources/dom column_length = $("#tbody_tabla tr:first td").length;

來源

2015-09-22 13:27:30 Harsha

我用這段代碼嘗試過，但它也不工作，我編輯了答案以添加我的第二種方法。 – sheilapbi

@sheilapbi：代碼有效嗎？ – Harsha

哦，是的，我選擇它作爲答案，因爲它工作。無論如何，我改進了它，如果你願意，我可以告訴你我最後的工作。 – sheilapbi

您可以td標籤改變孩子的僞選擇，並與nth-child您可以選擇您需要的列：

var $rows = $('#tabla_servicios tr td:nth-child(2)'); //column 2 
var $rows = $('#tabla_servicios tr td:nth-child(10)'); //column 10

好運

來源

2015-09-22 13:16:36

我試過了，但它沒有工作，因爲它也在查看整個表格。 – sheilapbi

我不知道你是如何嘗試它，但用'：nth-child（）'選擇器選擇列的工作正常。 –

jQuery表格列搜索過濾器

回答

相關問題