Dynamisch erstellte Tabellenabfragen

Ich habe eine Seite auf meiner Website, die Benutzern eine Datenbank ihrer Artikel anzeigen lässt. Es hat ein ziemlich einfaches Format:Dynamisch erstellte Tabellenabfragen

Barcode - Artikelname - Famous - Gewicht

Wie es im Moment steht einige Benutzer für die Fähigkeit, fragen Sie jede Spalte einzeln zu suchen. wenn drei Beispieleinträge waren zum Beispiel:

0000001 - macbookpro - Apfel - 1.5kg

0000002 - MacBookAir - Apfel - 1.5kg

0000003 - Apfel - Granny Smith - 200g

I Ich würde gerne die Möglichkeit haben, jede Zeile einzeln abfragen zu können (und vielleicht sogar alphabetisch zu sortieren). Wenn ich also in das Eingabefeld für den Text "productName" getippt und 'apple' eingegeben hätte, würden die Zeilen 1 & 2 vorübergehend verschwinden, so dass ich nur mit meiner verbleibenden Zeile zurückbliebe.

ich meine Probe js & HTML-Code und auch ein Bild beigefügt beigefügt haben:

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 Code:

$(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

Quelle

2016-11-20 James Dorrian

Sie können es leicht mit jquery-Datentabellen. –

Oder zahlreiche andere Grid/Table-Plugins. Versuchen Sie nicht, das Rad dafür neu zu erfinden – charlietfl

So, falls jemand interessiert ist, wenn Sie das JS t benutzen Technik der Event-Bindung, Jquery-Plugins wie JQuery-Datatables ist ein Ärgernis. Stattdessen ist hier eine reine JS-Lösung, bei der Zeilen verschwinden, je nachdem, welche Eingabe Sie in das Suchfeld eingeben. Die Löschfunktion funktioniert immer noch einwandfrei.

JS Code:

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

Bilder:

Quelle

2016-11-21 14:40:58

Dynamisch erstellte Tabellenabfragen

Antwort

Verwandte Themen