jqueryで新しいテーブル行にmysqlデータを取得

jqueryとAJAXを使用すると非常に緑色に表示されます。この状況でAJAXが助けになるかどうかは不明です。私はこの質問を、私が探しているものに最も近いものを見てきました。jqueryで新しいテーブル行にmysqlデータを取得

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

私はSKU番号のオフに基づいてから取得したデータをたいとMySQLのDBを持って、それぞれの行に入力しました。私はこれをPHPを使用して送信ボタンで作業していますが、これは私がバーコードスキャナを使用しているプロジェクトです。

この質問には2番目の部分がありますが、私は最初に質問してみることにします。

出典

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モデル記述QTY

40 1ユーザーネーム9z600248b669b62d75b300a07b89060n

出典

2016-05-18 09:34:16

これが私のために動作しませんでした。コードのコピーが正しいかどうかわからない –

接続とクエリの値を編集する必要があるため、コードをコピーしただけでは機能しません。 –

dbに接続すると、私の最後にエラーが発生しました。私はこれを解決した。 –

私が編集したコードでしか成功していました。入力項目に別の項目を入力しようとすると、最初の値のみが更新されます。また、私は新しい行を追加し、入力フィールドに新しい値を入力した後に最後の行を保持しようとしています。

<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

.replaceWith（）の代わりに.after（）を使用して新しい行を追加する際の問題を解決できました。 –

私はいくつかのより多くの周り掘りなかったと私は私が持っていた問題のいくつかを解決することができた。ここで

は、スクリプトの最新バージョンです。しかし、私はまだ新しい行が追加されたときにDBからデータを取得できません。以下は

私のコードです：

<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データを取得

答えて

関連する問題