jQuery 表格列搜索过滤器答案

【问题标题】：jQuery table column search filterjQuery 表格列搜索过滤器
【发布时间】：2015-12-19 11:37:25
【问题描述】：

我正在尝试使用 jquery 在 html 表的特定列中搜索数据。我搜索了不同的答案，但找不到适合我的答案。

表格只是一个简单的表格：

<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 中添加警报时才能删除行。

【问题讨论】：

使用 Jquery 数据表 [link] (datatables.net/examples/data_sources/dom.html)

标签： jquery search filter html-table

【解决方案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();
    }
}

您还可以动态查找列数和行数
例如：column_length = $("#tbody_tabla tr:first td").length;

【讨论】：

我尝试使用此代码，但它也不起作用，我编辑了答案以添加我的第二种方法。
哦，是的，我选择它作为答案，因为它有效。无论如何，我改进了它，如果你愿意，我可以给你看我的最后一部作品。

【解决方案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

祝你好运

【讨论】：

我试过了，但它也没有工作，因为它也在查看整个表格。
我不知道您是如何尝试的，但是使用 :nth-child() 选择器选择列可以正常工作。