表头在自动完成期间被隐藏

Question

当用户在输入中键入时，我正在搜索表格并相应地显示结果。

但是我面临的问题是表头在搜索后被隐藏了。

这是我的代码

$(document).ready(function()
{
        $('#searchinputtext').keyup(function()
        {
                var tr = $('#videosfromtagstable tbody tr'); //use tr not td
                if ($(this).val().length >= 2)
                {
                        var inputdata = $.trim($("#searchinputtext").val());
                        $('#errmsgnovideos').hide();
                        var noElemvideo = true;
                        var val = $.trim(this.value).toLowerCase();
                        el = tr.filter(function()
                        {
                                return $(this).find('td:eq(0)').text().toLowerCase().indexOf(val) >= 0;
                        }); // <==== closest("tr") removed
                        if (el.length >= 1)
                        {
                                noElemvideo = false;
                        }
                        //now you fadeIn/Out every row not every cell
                        tr.not(el).fadeOut();
                        el.fadeIn();
                        if (noElemvideo)
                                if (inputdata !== '')
                                {
                                        $('#errmsgnovideos').html('No Results Matched').show();
                                }
                                else
                                {
                                        $('#errmsgnovideos').hide();
                                }
                }
                else
                {
                        tr.fadeIn(); //show all if length does not match the required number of characters
                        $('#errmsgnovideos').hide();
                }
        })
});

http://jsfiddle.net/cod7ceho/307/

你能告诉我如何解决这个问题吗？

Answer 1

使用 <thead>

<input type="text" id="searchinputtext" class="form-control" placeholder="Search">
   <span id="errmsgnovideos"></span>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
    <tr class="existingvideos">
         <th width="20%">Name</th>
         <th width="35%">File</th>
         <th width="30%">Course</th>
         <th width="15%">SEEPZ</th>
      </tr>
</thead>
   <tbody class="connectedSortable ui-sortable">
      <tr video-id="48" title="" class="newvideos exercises-add-table-content">
         <td>Dsada</td>
         <td><a href="xxx" target="_blank">dftyr.mp4</a></td>
         <td>
            <span class="btn btn-sm btn-success btn-circle">Five</span>
         </td>
         <td><i class="fa fa-check"></i></td>
      </tr>
      <tr video-id="49" title="" class="newvideos exercises-add-table-content">
         <td>Fds</td>
         <td><a href="xxx" target="_blank">dftyr.mp4</a></td>
         <td>
            <span class="btn btn-sm btn-success btn-circle">Five</span>
         </td>
         <td><i class="fa fa-check"></i></td>
      </tr>
   </tbody>
</table>

demo：http：//jsfiddle.net/cod7ceho/308/

或者，如果您是"我无法修改我的 HTML"的类型

$('#videosfromtagstable tbody tr:not(:first)');

http://jsfiddle.net/cod7ceho/312/

Answer 2

    <input type="text" id="searchinputtext" class="form-control" placeholder="Search">
    <table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
       <tbody class="connectedSortable ui-sortable">
          <tr class="existingvideos">
             <th width="20%">Name</th>
             <th width="35%">File</th>
             <th width="30%">Course</th>
             <th width="15%">SEEPZ</th>
          </tr>
          <tr video-id="48" title="" class="newvideos exercises-add-table-content">
             <td>Dsada</td>
             <td><a href="xxx" target="_blank">dftyr.mp4</a></td>
             <td>
                <span class="btn btn-sm btn-success btn-circle">Five</span>
             </td>
             <td><i class="fa fa-check"></i></td>
          </tr>
          <tr video-id="49" title="" class="newvideos exercises-add-table-content">
             <td>Fds</td>
             <td><a href="xxx" target="_blank">dftyr.mp4</a></td>
             <td>
                <span class="btn btn-sm btn-success btn-circle">Five</span>
             </td>
             <td><i class="fa fa-check"></i></td>
          </tr>     
       </tbody>
       <tfoot>
         <tr><td colspan="3" id="errmsgnovideos"></td></tr>
       </tfoot>
    </table>
$(document).ready(function()
{
        $('#searchinputtext').keyup(function()
        {
                var tr = $('#videosfromtagstable tbody tr').not(".existingvideos"); //use tr not td
                if ($(this).val().length >= 2)
                {
                        var inputdata = $.trim($("#searchinputtext").val());
                        $('#errmsgnovideos').hide();
                        var noElemvideo = true;
                        var val = $.trim(this.value).toLowerCase();
                        el = tr.filter(function()
                        {
                                return $(this).find('td:eq(0)').text().toLowerCase().indexOf(val) >= 0;
                        }); // <==== closest("tr") removed
                        if (el.length >= 1)
                        {
                                noElemvideo = false;
                        }
                        //now you fadeIn/Out every row not every cell
                        tr.not(el).fadeOut();
                        el.fadeIn();
                        if (noElemvideo)
                                if (inputdata !== '')
                                {
                                        $('#errmsgnovideos').html('No Results Matched').show();
                                }
                                else
                                {
                                        $('#errmsgnovideos').hide();
                                }
                }
                else
                {
                        tr.fadeIn(); //show all if length does not match the required number of characters
                        $('#errmsgnovideos').hide();
                }
        })
});

你试试这个可能会帮助你