动态创建表查询 [英] Dynamically created table queries
问题描述
我的网站上有一个页面，让用户看到他们的项目的数据库。它有一个非常简单的格式：
I have a page on my site which lets users see a database of their items. It has a pretty simple format:
条形码 - ProductName - 品牌名称 - 重量
Barcode - ProductName - BrandName - Weight
一些用户要求能够单独搜索每一列。例如，如果3个样本条目是：
As it stands at the moment some users are asking for the ability to search each column individually. for example, if 3 sample entries were:
0000001 - macbookPro - Apple - 1.5kg
0000001 - macbookPro - Apple - 1.5kg
0000002 - macbookAir - 苹果 - 1.5kg
0000002 - macbookAir - Apple - 1.5kg
0000003 - Apple - Granny Smith - 200g
0000003 - Apple - Granny Smith - 200g
我希望能够成为能够单独查询每一行（甚至可以按字母排序）。所以如果我去了productName文本输入字段并键入'apple'，那么行1& 2会暂时消失，只剩下我剩下的一排。
I would like the ability to be able to query each row individually (and maybe even sort them alphabetically). So if i went to the productName text input field and typed 'apple' then rows 1 & 2 would temporarily disappear leaving me only with my remaining row.
我附上了我的样本js& html代码，并附上图片：
I have attached my sample js & html code and also attached a picture:
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代码：
$(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
推荐答案
所以，任何人都有兴趣，当使用JS技术的事件绑定时，像jQuery-datatables这样的jQuery插件是一个麻烦。因此，这里是一个纯JS解决方案，其中行消失，具体取决于您在搜索框中输入的内容。删除功能仍然可以正常工作。
So, just incase anyone is interested, when using the JS technique of event binding, jquery plugins like JQuery-datatables is a nuisance. So, instead here is a pure JS solution where rows disappear depending on what input you enter into the search box. The delete functionality still works perfectly.
JS代码：
$("#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;
});
});
图片：
这篇关于动态创建表查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
