Question

I’m trying to filter out rows of an HTML table based on user input from a dropdown menu. My idea is to remove the rows if the first column of the first row is not equal to the value of the drop down menu. However the only thing I’ve been able to make it do is either just remove the first column, remove everything, or everything except the first column, depending on how I’ve messed with the jquery function. I’m sure it’s something simple but I can’t figure it out. The code I’m using is below:
Jquert function:

<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:

<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

Why not iterate over tds?

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