Question

我在文本字段上使用KeyuP，功能正常，但结果对齐不合适

在下面的小提琴

输入关键字t

这是我的代码

$(document).ready(function()
{
      $('#searchinputtext').keyup(function ()
        {
               $('#errmsgnotags').hide();
             var noElemtag = true;

                var val = $.trim(this.value).toLowerCase();
                var tr = $('#videosfromtagstable tbody td');

                el = tr.filter(function() {
                    return this.innerHTML.toLowerCase().indexOf(val)>=0;
                }).closest('td');

                if(el.length>=1)
                {
                  noElemtag  = false;
                }


                tr.not(el).fadeOut();
                el.fadeIn();

         if (noElemtag)
    $('#errmsgnotags').html('No Results Matched').show();
        })
});

Answer 1

将css属性显示替换为可见性

$(document).ready(function()
{
		$('#searchinputtext').keyup(function ()
        {
        			$('#errmsgnotags').hide();
        		 var noElemtag = true;

                var val = $.trim(this.value).toLowerCase();
                var tr = $('#videosfromtagstable tbody td');
                
                el = tr.filter(function() {
                    return this.innerHTML.toLowerCase().indexOf(val)>=0;
                }).closest('td');

                if(el.length>=1)
                {
                	noElemtag  = false;
                }
                tr.not(el).css('visibility','hidden')
          
                el.css('visibility','visible')

			if (noElemtag)
    $('#errmsgnotags').html('No Results Matched').show();
        })
});

#errmsgnotags
{
 color: red;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="searchinputtext" class="form-control" placeholder="Search">
<span id="errmsgnotags"></span>
<table class="mytable1 table" id="videosfromtagstable">
   <tbody class="connectedSortable ui-sortable">
      <tr>
         <th>Name</th>
         <th>Video</th>
      </tr>
      <tr video-id="48" class="newvideos">
         <td>Dsada</td>
         <td><a href="http://xxx/Images/dfimage.jpg" target="_blank">http://xxx/Images/dfimage.jpg</a></td>
      </tr>
      <tr video-id="58" class="newvideos">
         <td>Test</td>
         <td><a href="http://xxx/Images/dfimage.jpg" target="_blank">http://xxx/Images/dfimage.jpg</a></td>
      </tr>
      <tr video-id="59" class="newvideos">
         <td>Fdfsd</td>
         <td><a href="http://xxx/Images/dfimage.jpg" target="_blank">http://xxx/Images/dfimage.jpg</a></td>
      </tr>
   </tbody>
</table>

Answer 2

请参阅http://jsfiddle.net/cod7ceho/256/以搜索行

更新：或http://jsfiddle.net/cod7ceho/257/搜索每个表格行的第一个单元格。

$(document).ready(function()
{
        $('#searchinputtext').keyup(function ()
        {
                    $('#errmsgnotags').hide();
                 var noElemtag = true;

                var val = $.trim(this.value).toLowerCase();
                var tr = $('#videosfromtagstable tbody tr');//use tr not td

                el = tr.filter(function() {
                    return this.innerHTML.toLowerCase().indexOf(val)>=0;
                });// <==== closest("tr") removed

                if(el.length>=1)
                {
                    noElemtag  = false;
                }

                //now you fadeIn/Out every row not every cell
                tr.not(el).fadeOut();
                el.fadeIn();

            if (noElemtag)
    $('#errmsgnotags').html('No Results Matched').show();
        })
});

在使用Keyup Jquery过滤表时，结果对齐是不正确的

2 个答案: