从所选表中删除类 - > TR

时间:2017-11-01 20:56:13

标签: javascript jquery html html-table

我有一个下拉列表,其中的类别对应于表中的列。在下拉列表中选择类别时,功能会隐藏与所选类别不匹配的所有项目。我现在想要从项目的父项中删除一个类。表格 - > tr下的t。这是我的代码:

  

JS

    var $rows = $('#table tbody tr');
    $("#dropdown").change(function () {
    var selected = $(this).find("option:selected").text().toLowerCase();
    if (selected != VISA_ALLA) {
        $rows.show().filter(function () {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
             $(this).parent().removeClass("ugly");
            return !~text.indexOf(selected);
        }).hide();

    } else {
        $rows.show();
    }
})
  

分页

    $('#table').paginate({
    limit: 1,
    nextText: "Nästa",
    previousText: "Föregående",
    childrenSelector: 'tbody > tr.ugly'
});
  

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 id="category">@objProduct.Category</td>
                    </tr>
                }
            </tbody>

我做错了什么? “丑陋”这个类永远不会从tr中删除。

--- --- EDIT

所以我想删除tr`s上与下拉文本不匹配的所有丑陋类。这是因为我使用的是一个分页,它会使所有具有该类的tr变得丑陋。我希望根据下拉选择更新分页。

2 个答案:

答案 0 :(得分:1)

只需将内联链接到其他方法

即可
$rows.removeClass("ugly").show().filter(function () {
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();            
      return !~text.indexOf(selected);
}).hide();

过滤后的链条......取决于你想要完成的事情(不清楚)

答案 1 :(得分:0)

好的我觉得我得到了你想要的东西,你要么做:

var $matched = $rows.show().filter(function () {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(selected);
});

$matched.removeClass('ugly');

$rows.not($matched).removeClass('ugly');