使用jQuery将mysql数据获取到新表行
[英]get mysql data to new table row with jquery
问题描述
I'm very green when using jquery and AJAX. 
使用jquery和AJAX时我很绿。 Not sure if AJAX would help in this situation. 不知道在这种情况下AJAX是否会有所帮助。 I've looked at this question its the closest to what i'm looking for. 我已经看过这个问题，它与我要寻找的问题最接近。
Add new row to table using jQuery on enter key button 在输入键上使用jQuery将新行添加到表中
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>');
}
}
});
I have a MySQL DB that I would like data retrieved from based off of the sku # entered into their respective rows. 我有一个MySQL数据库，我希望根据在各自行中输入的sku＃从中检索数据。 I have this working with a submit button using PHP, but this is for a project I have that uses a Barcode scanner. 我使用PHP使用“提交”按钮进行此操作，但这是针对我使用条形码扫描仪的项目。
There is a second part to this question but i'll try to figure that out on my own first before asking. 这个问题还有第二部分，但是我会先问清楚这个问题。
3 个解决方案
解决方案1
1 2016-05-18 09:34:16
<?
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>
I tried with my dummy database with users and I get: 我尝试与用户一起使用我的虚拟数据库，并且得到：
SKU MODEL DESCRIPTION QTY SKU模型说明数量
40 1 Username 9z600248b669b62d75b300a07b89060n 40 1用户名9z600248b669b62d75b300a07b89060n
解决方案2
0 2016-05-23 02:22:45
I had limited success with the edited code. 我在编辑后的代码中获得的成功有限。 When I try to enter a different item # into the input field only the first value updates. 当我尝试在输入字段中输入其他项＃时，只会更新第一个值。 Also, I'm trying to add a new row and retain the last row after entering a new value in the input field. 另外，我尝试在输入字段中输入新值后添加新行并保留最后一行。
Here is the latest version of the script: 这是脚本的最新版本：
<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>
解决方案3
0 2016-05-23 02:52:47
I did some more diggin around and I was able to resolve some of the issues I was having. 我进行了更多的挖掘工作，并且能够解决自己遇到的一些问题。 However, I still can't get data from the DB when a new row is added. 但是，添加新行后，我仍然无法从数据库获取数据。
Below is my 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.