jQuery column column search filter

Question

Я пытаюсь найти данные в определенном столбце таблицы html с помощью 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(); 


      }); 

Но я хотел бы найти по столбцу.

Edit:

Это мой второй подход:

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

Answer 1

Вы можете попробовать так:

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

Также вы можете найти количество столбцов и количество строк динамически
Ex: column_length = $("#tbody_tabla tr:first td").length;

Answer 2

Вы можете изменить селектор ребенка псевдокод для 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 

удачи