Question

我有一个搜索功能来过滤我的表格。代码：

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列且具有类＆＃34;丑陋＆＃34;附加到表正文部分中的项tr？

Answer 1

您可以使用以下选择器：

$(":first-child",this).hasClass('ugly')
//OR
$(":nth-child(1)", this).hasClass('ugly')
//OR
$(this).children(":first").hasClass('ugly')
//OR
$(this).children()[index].hasClass('ugly')

希望这有帮助。

Answer 2

我如何匹配仅等于第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">

Answer 3

您可以使用：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>

这将返回第一个“丑陋”类的tr。

根据孩子和班级选择表项

3 个答案: