0

私のサイトには、ユーザーがアイテムのデータベースを表示できるページがあります。それは非常に単純なフォーマットを持っています:

バーコード - 商品名 - ブランド名 - 重量

現時点では、一部のユーザーは、各列を個別に検索する機能を求めています。たとえば、3 つのサンプル エントリが次の場合:

0000001 - macbookPro - アップル - 1.5kg

0000002 - macbookAir - アップル - 1.5kg

0000003 - アップル - グラニースミス - 200g

各行を個別にクエリできる機能が必要です (さらには、アルファベット順に並べ替えることもできます)。したがって、productName テキスト入力フィールドに移動して「apple」と入力すると、行 1 と 2 が一時的に消えて、残りの行だけが残ります。

サンプルのjsとhtmlコードを添付し、写真も添付しました：

テーブルの絵

HTML:

<body>
    <div id="header"></div>
    <div id="content"></div><!-- This is where the content will be loaded -->


    <table class="contenttable" style = "width: 40%;">
        <tr id="searchBoxes">
            <td><input type="text" placeholder="Search"></td><!-- Searches barcodeID -->
            <td><input type="text" placeholder="Search"></td><!-- Searches ProductName -->
            <td><input type="text" placeholder="Search"></td><!-- Searches BrandName -->
            <td><input type="text" placeholder="Search"></td><!-- Searches Weight -->

        </tr>
        <tr id="columnNames">
            <td><b>BarcodeID</b></td>
            <td><b>ProductName</b></td> 
            <td><b>BrandName</b></td>
            <td><b>Weight</b></td>
        </tr>
        <tr id="final_row"></tr>
        <div class="error" id="display_error"></div>
    </table>

</body>

JS コード:

$(document).ready(function(){
$.get("../php/security.php", function(response){
        if(response.result == "failure"){
            location.href='../user_login.html';
        } else {
            $("#header").load("../header_logout.html");
            //from here down is the relevant code
            $.post("../php/item_database.php", {email1:response.data.authUser}, function(indata){
                indata.items.forEach(function(element){
                    $BarcodeID = element.BarcodeID;
                    $ProductName = element.ProductName;
                    $BrandName = element.BrandName;
                    $Weight = element.Weight;
                    $row = "<tr class='row'><td class='rowbarcode'>" + $BarcodeID + "</td>" + "<td>" + $ProductName + "</td>" + "<td>" + $BrandName + "</td>" + "<td>" + $Weight + "</td>" + "<td>" + "<button class='delete'>Delete</button>" + "</td></tr>";
                    $("#final_row").before($row);
                });
            }, "json");//eo post
        } //eo else
 }, "json"); //eo get

$(".contenttable").on('click', '.delete', function(){
    var BarcodeID = $(this).closest('tr').find('.rowbarcode').text(); //get barcode of row to delete
    console.log(BarcodeID);
    //send barcode ID and UserID to removescan.php to delete from DB
});

});//eof
4

1 に答える 1

0

したがって、誰かが興味を持っている場合に備えて、イベント バインディングの JS 手法を使用する場合、JQuery-datatables のような jquery プラグインは厄介です。代わりに、検索ボックスに入力した内容に応じて行が消える純粋な JS ソリューションを次に示します。削除機能は引き続き完全に機能します。

JS コード:

$("#search").keyup(function () {
var value = this.value.toLowerCase().trim();

$("table tr").each(function (index) {
    if (!index) return;
    $(this).find("td").each(function () {
        var id = $(this).text().toLowerCase().trim();
        var not_found = (id.indexOf(value) == -1);
        $(this).closest('tr').toggle(!not_found);
        return not_found;
    });
});

ピクチャー： 検索なし

探す

于 2016-11-21T14:40:58.450 に答える