bekomme mysql Daten in neue Tabellenzeile mit jquery

Ich bin sehr grün, wenn Sie jquery und AJAX verwenden. Nicht sicher, ob AJAX in dieser Situation helfen würde. Ich habe mir diese Frage angesehen, die am ehesten dem entspricht, wonach ich suche.bekomme mysql Daten in neue Tabellenzeile mit jquery

Add new row to table using jQuery on enter key button

var inp = $("#txt"); 
// where #txt is the id of the textbox 

$(".table-cell-text").keyup(function (event) { 
if (event.keyCode == 13) { 
    if (inp.val().length > 0) { 
     $('#myTable tr:last').replaceWith('<tr class="table-row"><td class="table-cell">' + inp.val() + '</td>' + 
     '<td class="table-cell">' + 
     '<td></td>' + 
     '</td>' + 
     '<td class="table-cell">' + 
     '</td></tr>'); 
    } 
} 

});

FIDDLE

I eine MySQL DB haben, die I-Daten abgerufen von aus der SKU # in ihre jeweiligen Zeilen eingegeben basierend möchten. Ich habe dies mit einem Submit-Button mit PHP arbeiten, aber das ist für ein Projekt, das ich einen Barcode-Scanner verwendet.

Es gibt einen zweiten Teil dieser Frage, aber ich werde versuchen, das herauszufinden, bevor ich frage.

Quelle

2016-05-18 cpt-crunchy

<? 

if (!empty($_POST)) 
{ 
    $db = new mysqli('localhost', 'root', 'password', 'table'); 
    $result = $db->query('SELECT * FROM `users` '); 
    $result = $result->fetch_array(); 

    print($result['id'].' - '.$result['username'] .' - '.$result['password']); 
    die(); 
} 
?> 

<!DOCTYPE html> 
<html> 
<head> 
    <!-- head here --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<div><input id="txt" placeholder="Enter barcode" type="text"></div> 
<table id="myTable"> 
    <tr class="table-header"> 
     <td class="table-cell">SKU</td> 
     <td class="table-cell">MODEL </td> 
     <td class="table-cell">DESCRIPTION</td> 
     <td class="table-cell">QTY</td> 
    </tr> 

    <tr class="table-row"> 

    </tr> 
</table> 

<script> 
var inp = $("#txt"); 
// where #txt is the id of the textbox 

$("#txt").keyup(function (event) { 
    if (event.keyCode == 13) 
    { 
     if (inp.val().length > 0) 
     { 
      $.ajax({ 
       url: "test.php", 
       type: "post", //send it through POST method 
       data: {id: inp.val()}, 
       success: function(response) 
       { 
        values = response.split(' - '); 
        $('#myTable tr:last').replaceWith('<tr class="table-row"><td class="table-cell">' + inp.val() + '</td>' + 
         '<td class="table-cell">' + values[0] + 
         '<td> ' + values[1] + '</td>' + 
         '</td>' + 
         '<td class="table-cell">' + values[2] + 
         '</td></tr>'); 
       }}); 
     } 
    } 

}); 
</script> 


</body> 

</body> 
</html>

Ich habe versucht, mit meiner Dummy-Datenbank mit den Nutzern und ich:

SKU MODELL BESCHREIBUNG MENGE

40 1 Benutzername 9z600248b669b62d75b300a07b89060n

Quelle

2016-05-18 09:34:16

Das hat bei mir nicht funktioniert. Nicht sicher, ob meine Kopie Ihres Codes korrekt ist –

Es sollte nicht funktionieren, wenn Sie nur meinen Code kopiert haben, weil Sie Verbindungs- und Abfragewerte bearbeiten müssen. –

ok. Es gab einen Fehler an meinem Ende beim Verbinden mit der db. Ich habe das gelöst. –

ich nur begrenzten Erfolg mit dem bearbeiteten Code hatte. Wenn ich versuche, ein anderes Element # in das Eingabefeld einzugeben, wird nur der erste Wert aktualisiert. Außerdem versuche ich, eine neue Zeile hinzuzufügen und die letzte Zeile nach dem Eingeben eines neuen Werts in das Eingabefeld beizubehalten.

Hier ist die neueste Version des Skripts:

<script> 
    var inp = $("#txt"); 
    // where #txt is the id of the textbox 

    $("#txt").keyup(function (event) { 
if (event.keyCode == 13) 
{ 
    if (inp.val().length > 0) 
    { 
     $.ajax({ 
      url: "index.php", 
      type: "POST", //send it through POST method 
      data: {id: inp.val()}, 
      success: function(response) 
      { 
       values = response.split(' - '); 
       $('#report tr:last').replaceWith(
        "<tr class='table-row'><td class=''>" + inp.val() + "</td>" + 
        "<td class=''>" + values[1] + "</td>" + 
        "<td class=''>" + values[2] + "</td>" + 
        "<td class=''>" + values[3] + "</td></tr>"); 
      }}); 
    } 
} 

}}); 
</script>

Quelle

2016-05-23 02:22:45

Ich konnte das Problem beim Hinzufügen einer neuen Zeile lösen, indem ich .after() anstelle von .replaceWith() verwendete. –

ich einige mehr haben Diggin um und ich konnte einige der Probleme lösen, die ich hatte. Ich kann jedoch immer noch keine Daten aus der Datenbank abrufen, wenn eine neue Zeile hinzugefügt wird.

Unten ist mein Code:

<div class="row"> 
    <div class="col-md-1"></div> 
    <div class="col-xs-3"> 
     <h3 class="h4 text-center"><input type="text" name="barcode" id="txt" size="90" class="col-md-9" value="" placeholder="Barcode/Product Name"></h3> 

</div> 
</div> 
<br /> 
<div class="row"> 
    <div class="col-md-1"><p class=""></p></div> 
    <div class="col-md-6"> 
     <table id="report" class="table table-bordered table-hover"> 
      <thead> 
       <tr> 
        <td>SKU</td> 
        <td>Model</td> 
        <td>Item Description</td> 
        <td>Qty</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr class='table-row'> 


       </tr> 
      </tbody> 
     </table> 
    </div> 
    </div> 


<script> 
var inp = $("#txt"); 
// where #txt is the id of the textbox 

$("#txt").keyup(function (event) { 
if (event.keyCode == 13) 
{ 
    if (inp.val().length > 0) 
    { 
     $.ajax({ 
      url: "index.php", 
      type: "POST", //send it through POST method 
      data: {id: inp.val()}, 
      success: function(response) 
      { 
       values = response.split(' - '); 
       $('#report tr:last').after(
        "<tr class='table-row'><td class=''>" + inp.val() + " </td>" + 
        "<td class=''>" + values[1] + "</td>" + 
        "<td class=''>" + values[2] + "</td>" + 
        "<td class=''>" + values[3] + "</td></tr>"); 
      }}); 
    } 
    $('input[name=barcode]').val(''); 
} 

}); 
</script>

Quelle

2016-05-23 02:52:47

bekomme mysql Daten in neue Tabellenzeile mit jquery

Antwort

Verwandte Themen