Question

只是想使用jquery将搜索可能性添加到已加载的表中，但下面的代码仅适用于所有列。

我想让它适用于一些细胞，在这种情况下，首先是3 你可以检查代码并帮我找出错误：

这是我的HTML代码：

<input type="text" id="buscar" name="buscar"/>

这是我的js代码：

$("#buscar").keyup(function () {
    var value = $(this).val();
    $('#borrar').css('display', 'inline');
    if (value.length > 1) {
        $("#proveedores tbody>tr").hide();
        $("#proveedores td:contains-ci('" + value + "')").parent("tr").show();
    } else {
        $("#proveedores tbody>tr").show();
        if (value === "")
            $('#borrar').css('display', 'none');
    }
});
$.extend($.expr[":"], {
    "contains-ci": function (elem, i, match, array) {
        var iner = elem.innerHTML;
        var cad = match[3];
        iner = $.trim(iner);
        cad = $.trim(cad);
        if (iner.substring(2, 3) === '-') {
            cad = cad.substring(0, 2) + "-" + cad.substring(2);
        }
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((cad || "").toLowerCase()) >= 0;
    }
});

以及该表的一个例子：

<table class="tabla" id="proveedores">
    <thead>
        <tr>
            <th>
                Numero
            </th>
            <th>
                Razon social
            </th>
            <th>
                CUIT
            </th>
            <th>
                Modalidad de pago
            </th>
            <th>
                Vencido meses anteriores
            </th>
            <th>
                A vencer este mes
            </th>
            <th>
                Subtotal
            </th>
            <th>
                Semana 88/89
            </th>
            <th>
                No vencido
            </th>
            <th>
                Anticipos
            </th>
            <th>
                TOTAL ADEUDADO
            </th>
            <th>
                Cheques en cartera
            </th>
            <th>
                Cheques entregados no cobrados
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>">
            <td>
                1
            </td>
            <td>
                fooexample
            </td>
            <td>
                30-707070-2
            </td>
            <td>
                contado
            </td>
            <td>
                22222222
            </td>
            <td>
                22222222
            </td>
            <td>
                22222222
            </td>
            <td>
                22222222
            </td>
            <td>
                22222222
            </td>
            <td>
                22222222
            </td>
            <td>
                22222222
            </td>
            <td>
                22222222
            </td>
            <td>
                22222222
            </td>
        </tr>
    22222222
    </tbody>
</table>

Answer 1

要过滤选择器以获取第3列，请使用:nth-child(3)。

删除它，这是行不通的，因为它将在搜索字段中输入的值作为子字符串...不是元素内部HTML。

if (iner.substring(2, 3) === '-') {
    cad = cad.substring(0, 2) + "-" + cad.substring(2);
}

这是您的脚本，在this CodePen中工作正常。

$("#buscar").keyup(function () {
    var value = $(this).val();
    $('#borrar').css('display', 'inline');
    if (value.length > 1) {
        $("#proveedores tbody>tr").hide();
        $("#proveedores tr td:nth-child(3):contains-ci('" + value + "')").parent("tr").show();
    } else {
        $("#proveedores tbody>tr").show();
        if (value === "")
            $('#borrar').css('display', 'none');
    }
});
$.extend($.expr[":"], {
    "contains-ci": function (elem, i, match, array) {
        var iner = elem.innerHTML;
        var cad = match[3];
        console.log(cad);
        iner = $.trim(iner);
        cad = $.trim(cad);
        /*if (iner.substring(2, 3) === '-') {
            cad = cad.substring(0, 2) + "-" + cad.substring(2);
        }*/
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((cad || "").toLowerCase()) >= 0;
    }
});

<小时/> 的修改

事实上，您也可以使用“标准”:contains()并完全删除扩展功能。

见this second CodePen。

$("#buscar").keyup(function () {
    var value = $(this).val();
    $('#borrar').css('display', 'inline');
    if (value.length > 1) {
        $("#proveedores tbody>tr").hide();
        $("#proveedores tr td:nth-child(3):contains('" + value + "')").parent("tr").show();
    } else {
        $("#proveedores tbody>tr").show();
        if (value === "")
            $('#borrar').css('display', 'none');
    }
});

jquery搜索适用于所有列而不是某些html表

1 个答案: