我有一个表格搜索功能,我想调整它以仅在“标题”列中查找匹配项。并隐藏所有与标题文本不匹配的项目。我的代码
JS
var $rows = $('#table tbody tr');
$('#search').keyup(function () {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
HTML
<table id="table" class="table table-striped table-hover">
<thead>
<tr>
<th>Handlingar</th>
<th>Title</th> <-----This column----
<th>Pris i kr</th>
<th>Skapad</th>
<th>Kategori</th>
</tr>
</thead>
<tbody>
@foreach (BuyAndSellAppWeb.Models.Advertisment objProduct in Model)
{
<tr>
@if (objProduct.SellerToken)
{
<td>
@Html.ActionLink("Ändra", "Edit", new { id = objProduct.ID }) | @Html.ActionLink("Radera", "DeleteItem", new { id = objProduct.ID }) | @Html.ActionLink("Detaljer", "Details", new { id = objProduct.ID })
</td>
}
else
{
<td>
@Html.ActionLink("Detaljer", "Details", new { id = objProduct.ID })
</td>
}
<td>@objProduct.ProductTitle</td>
<td>@objProduct.Price kr</td>
<td>@objProduct.Created.ToString("yyyy/MMM/dd")</td>
<td id="category">@objProduct.Category</td>
</tr>
}
</tbody>
</table>
尝试了很多不同的组合,但都没有成功。
最佳答案
在你的 js 中试试这个。希望它有效
$(document).ready(function() {
var $rows = $('#table tbody tr');
$('#search').keyup(function () {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $($(this).find('td')[1]).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
关于jquery - 调整 jQuery 表搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46972810/