[英]Select table items based on children and class
我有一个搜索功能来过滤我的表。 编码:
var $rows = $('#table tbody tr');
$('#search').keyup(function () {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
var $matched = $rows.show().filter(function () {
var text = $(this).children(":eq(" + "1" + ")").text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
的HTML
<tbody>
@foreach (BuyAndSellAppWeb.Models.Advertisment objProduct in Model)
{
<tr class="ugly">
@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>
@Html.ActionLink(@objProduct.ProductTitle, "Details", new { id = objProduct.ID })
</td>
<td>@objProduct.Price kr</td>
<td>@objProduct.Created.ToString("yyyy/MMM/dd")</td>
<td class="category">@objProduct.Category</td>
</tr>
}
</tbody>
如何匹配仅等于第1列且表主体部分的项目tr
附加了“丑陋”类的孩子?
您可以使用如下选择器:
$(":first-child",this).hasClass('ugly')
//OR
$(":nth-child(1)", this).hasClass('ugly')
//OR
$(this).children(":first").hasClass('ugly')
//OR
$(this).children()[index].hasClass('ugly')
希望这可以帮助。
如何匹配仅等于第1列且表主体部分的项目tr附加了“丑陋”类的孩子?
像这样?
//1) tbody rows only //2) tr has class 'ugly' var $rows = $('#table tbody tr.ugly'); $('#search').on('input', function () { //reset previous hides $rows.show(); var searchValue = this.value.trim().toLowerCase().replace(/ +/g, ' '); //3) column 1 only var $firstColumns = $rows.find('td:first-child'); $firstColumns.filter(function(){ return this.innerHTML.toLowerCase().replace(/ +/g, ' ').indexOf(searchValue) < 0; }).closest('tr').hide(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <thead> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> </thead> <tbody> <tr class="ugly"> <td>Apple</td> <td>Banana</td> <td>Orange</td> </tr> <tr class="ugly"> <td>Milk</td> <td>Tea</td> <td>Coffee</td> </tr> </tbody> </table> <input type="text" id="search">
您可以使用:first-child或:nth-child(1)。 但是选择器应该是这样的。
<tbody>
<tr class="ugly">
<td>...</td>
</tr>
</tbody>
<script>
var uglies = $('.ugly'); // $('tr.ugly') , $('tbody tr.ugly')
// The best choice is
var firstUgly = $('tbody > tr.ugly:first-child');
// The firstUgly could be <tr class="ugly">...</tr>
</script>
这将返回具有“ ugly”类的第一个tr。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.