使用jquery獲取mysql數據到新錶行使用jquery

當我使用jQuery和AJAX時，我很綠。不確定AJAX是否有助於這種情況。我已經看到了這個問題，它最接近我所尋找的。使用jquery獲取mysql數據到新錶行使用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

我有一個MySQL數據庫基於關閉SKU＃訂立與各行，我想獲取的數據。我有一個使用PHP提交按鈕的工作，但這是我使用條形碼掃描器的項目。

這個問題還有第二部分，但我會在詢問之前嘗試在我自己的第一部分中弄清楚。

來源

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>

我試圖用我的用戶虛擬數據庫，我也得到：

SKU模型描述數量

40名1 9z600248b669b62d75b300a07b89060n

來源

2016-05-18 09:34:16

這並沒有爲我工作。不知道我的代碼副本是否正確 –

如果您只是複製我的代碼，因爲您需要編輯連接和查詢值，它不應該工作。 –

好的。連接到數據庫時，我的一端出現了錯誤。我解決了這個問題 –

我與編輯的代碼有限的成功。當我嘗試在輸入字段中輸入不同的項目＃時，只會更新第一個值。此外，我試圖添加一個新行並在輸入字段中輸入新值後保留最後一行。

這裏是腳本的最新版本：

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

來源

2016-05-23 02:22:45

我能夠通過使用.after（）而不是.replaceWith（）來解決添加新行的問題。 –

我沒多一些陷周圍，我是能夠解決一些我遇到的問題。但是，當添加新行時，我仍然無法從數據庫獲取數據。

下面是我的代碼：

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

來源

2016-05-23 02:52:47

使用jquery獲取mysql數據到新錶行使用jquery

回答

相關問題