c# - 使用 jQuery 过滤掉生成表的行的问题

Question

我正在尝试根据下拉菜单中的用户输入过滤掉 HTML 表的行。我的想法是如果第一行的第一列不等于下拉菜单的值，则删除行。然而，我唯一能够做到的就是删除第一列，删除所有内容，或者除第一列之外的所有内容，这取决于我如何弄乱 jquery 函数。我确定这很简单，但我无法弄清楚。我正在使用的代码如下： Jquert 函数：

<script type="text/javascript">
    $(document).ready(function () {
        $('tr').show();
        $('#searchBtn').click(function () {
            var weaverSet = $("#weaverSet").val();
            $('tr').each(function () {
                var weaveName = $('td.headerName').text();
                if ($.trim(weaveName) != $.trim(weaverSet)) {
                    $(this).hide();
                }
            });
        });
    });

桌子：

<table class="dataTable">
<tr>
    <th>
        WS Name &nbsp;
    </th>
    <th>
        M Number
        <br/>
        Bar Code
    </th>
    <th>
        Start Date
        <br/>
        Start Time
    </th>
    <th>
        Length
        <br/>
        Doff Length
    </th>
    <th>
        Name
        <br/>
        End Time
    </th>
    <th>
        B Number
    </th>
    <th>
        Dynamic Value
    </th>  
</tr>

          <tbody>
    @foreach (var item in MVCMasterDetail.DataAccess.ManTracDataProvider.GetTopData())
    { 

        <tr>
            <td class ="headerName">
                @item.WSName
            </td>
            <td>
                @item.MNumber
            </td>
            <td>
                @item.StartDate
            </td>
            <td>
                @item.Length
            </td>
            <td>
                @item.Name
            </td>
            <td>
                @item.bnumber
            </td>
            <td>
                @item.DynamicValue
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td colspan="99"> //This calls the partial view that renders the detail table inside of it
                @Html.Action("MasterDetailDetailPartial", new { id = item.WorkOrderActualId, LNumber = item.MNumber })

            </td>
        </tr>

    }
             </tbody>

Answer 1

为什么不迭代 tds？

$('td.headerName').each(function () {
   var weaveName = $(this).text();
   if ($.trim(weaveName) != $.trim(weaverSet)) {
       $(this).parent().next().hide();
       $(this).parent().hide();
   }
});

Answer 2

主要问题是这一行：

var weaveName = $('td.headerName').text();

选择器将返回页面中具有该类的每个 TD。当您尝试从元素集合中获取值（如 text()）时，只会返回集合中第一个元素的值。

在您只想td.headerName在该行中查找的所有 TR 循环中。可以find()用来做。

$('tr').each(function () {
     /* look for text in this row*/
     var weaveName = $(this).find('td.headerName').text();
     /* no need to trim "weaverset" each time, do it when variable created, saves many function calls*/
     if ($.trim(weaveName) != $.trim(weaverSet)) {
           $(this).hide();
      }
});