使用jQuery过滤生成表的行时出现的问题

本文关键字：问题 jQuery 过滤 使用 | 更新日期: 2023-09-27 17:50:59

我试图过滤出基于用户输入从下拉菜单的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>

使用jQuery过滤生成表的行时出现的问题

为什么不遍历tds呢?

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

主要问题是这一行:

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

选择器将返回页面中带有该类的每个TD。当你试图从元素集合中获取一个值(，如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();
      }
});
相关文章：