如何使用jQuery搜索“输入类型文本”的HTML表数据？
如何使用jQuery搜索“输入类型文本”的HTML表数据？
提问于 2016-08-01 09:57:18
我想搜索表数据。我的表td由文本框组成。
当我在td's 中直接添加数据时，搜索代码会工作，但是当我的数据是文本框中的值时，不会工作。，我已经为搜索做了一些编码，但它似乎不起作用。我只是想能够搜索下表输入在一个搜索框。下面给出了我的表和代码的截图：
products.html
<script type="text/javascript">
$(document).ready(
function() {
$("#search").keyup(
function ()
{
var value = this.value.toLowerCase().trim();
$("table tr").each(
function (index)
{
if (!index) return;
$(this).find("td").children().attr("value").each(
function ()
{
var id = $(this).text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
return not_found;
});
});
});
});
</script>
<!-- Fetch table data -->
<sql:setDataSource var="myDataSource" driver="oracle.jdbc.OracleDriver" url="jdbc:oracle:thin:@10.1.56.49:1521:something" user="something" password="something"/>
<sql:query var="result" sql="select * from garageproducts" dataSource="${myDataSource}"/>
<table id="mytable" class="table table-hover">
<thead>
<tr>
<th>Mark</th>
<th>Barcode</th>
<th>Name</th>
<th>Brand</th>
<th>Stock</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<%! int cnt=0; %>
<c:forEach var="row" items="${result.rows}">
<tr>
<td hidden="true">${row.pid}</td>
<td>
<input type="checkbox" value="">
</td>
<td><input type="text" id='<%= "barcode"+cnt %>' value="${row.barcode}" name="barcodename" class="form-control input-sm"></td>
<td><input type="text" id='<%= "name"+cnt %>' value="${row.name}" name="namename" class="form-control input-sm"></td>
<td><input type="text" id='<%= "brand"+cnt %>' value="${row.brand}" name="brandname" class="form-control input-sm"></td>
<td><input type="text" id='<%= "stock"+cnt %>' value="${row.stock}" name="stockname" class="form-control input-sm"></td>
<td><input type="text" id='<%= "cost"+cnt %>' value="${row.cost}" name="costname" class="form-control input-sm"></td>
</tr>
<% ++cnt; %>
</c:forEach>
</tbody>
</table>回答 1
Stack Overflow用户
发布于 2016-08-02 12:14:58
我找到了一个解决办法。搜索工作正常，但不像预期的那样工作。它隐藏与搜索字符串不匹配的单元格。
下面是相同的小提琴链接：https://jsfiddle.net/freecoder/hfhtga0g/6/
<script type="text/javascript">
$(document).ready(function() {
$("#search").keyup(function() {
_this = this;
// Show only matching TR, hide rest of them
$.each($('#mytable tbody tr td>input[type="text"]'), function() {
if ($(this).val().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
});
</script>
<html>
<label for="search">Search products :</label>
<input type="text" id="search" placeholder="Enter text to search">
<!-- Fetch table data -->
<sql:setDataSource var="myDataSource" driver="oracle.jdbc.OracleDriver" url="jdbc:oracle:thin:@10.1.56.49:1521:something" user="something" password="something"/>
<sql:query var="result" sql="select * from garageproducts" dataSource="${myDataSource}"/>
<table id="mytable">
<thead>
<tr>
<th>Mark</th>
<th>Barcode</th>
<th>Name</th>
<th>Brand</th>
<th>Stock</th>
<th>Cost</th>
</tr>
</thead>
<tbody>
<c:forEach var="row" items="${result.rows}">
<tr>
<td> <input type="checkbox"> </td>
<td> <input type="text" value="${row.barcode}"> </td>
<td> <input type="text" value="${row.name}"> </td>
<td> <input type="text" value="${row.brand}"> </td>
<td> <input type="text" value="${row.stock}"> </td>
<td> <input type="text" value="${row.cost}"> </td>
</tr>
</c:forEach>
</tbody>
</table>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38695942
复制相关文章
相似问题
腾讯云开发者
