jQuery table column search filter

Question

I'm trying to search for data in a specific column of an html table using jquery. I've searched for different answers but I can't find one that suits me.

The table is just a simple one:

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

I found a piece of code that allows you to search for data in the whole 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();


            });

But I would like to search by column.

Edit:

This is my second approach:

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

                   }


                });

But it doesn't work correctly, the css code doesn't work and for removing the row it works only when I add an alert inside the if.

Use Jquery datatable [link] (https://www.datatables.net/examples/data_sources/dom.html) — Sabyasachi Mishra, Sep 24 '15 at 10:22

score 0 · Answer 1 · answered Sep 22 '15 at 13:16

0

You can change the child pseudo selector for td tag, and with nth-child you can select the column that you need:

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

Good luck

answered Sep 22 '15 at 13:16

Marcos Pérez Gude

21,869
4
38
69

I tried that but it didn't work either as it was also looking through the whole table. – sheilapbi Sep 24 '15 at 10:18
I don't know how you are trying it, but the selection of the column with the `:nth-child()` selector works fine. – Marcos Pérez Gude Sep 24 '15 at 11:29

score 0 · Accepted Answer · answered Sep 22 '15 at 13:27

0

You can try like this:

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

Also you can find the number of columns and number of rows dynamically
Ex: column_length = $("#tbody_tabla tr:first td").length;

answered Sep 22 '15 at 13:27

Harsha Biyani

7,049
9
37
61

I tried with this code but it's not working either, I edited the answer to add my second approach. – sheilapbi Sep 24 '15 at 10:19
Oh, yeah, I selected it as answer because it id working. Anyway, I improved it, I can show you my last work if you wish. – sheilapbi Oct 06 '15 at 10:49

jQuery table column search filter

2 Answers2

Linked