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。当您尝试从元素集合中获取值（ like text（））时，只会返回集合中第一个元素的值。

在所有TR的循环中，您只想查看该行中的td.headerName。可以使用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();
      }
});

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

2 个答案: