Question

我想将表记录中的搜索结果数量限制为12或任何小于15的数字等。这就是我对代码的了解程度。我做错了什么？

我尝试在Stack Overflow中发布一个JS Fiddle，但代码太长了，无法发布。

为了更好的理解，我准备了一个Js小提琴。

单独下面的Jquery部分：

 $("#search").on("keyup", function() {
 var value = $(this).val();
 $("table tr").each(function(index) {
 if (index !== 0) {
    $row = $(this);
    $row.find('td').each (function() {
        var id = $(this).text();
        if (this.innerHTML.toLowerCase().indexOf(value.toLowerCase()) !== 0) {

            $row.slice(0,12).hide();
        }
        else {
            $row.slice(0,12).show();
            return false;
        }
    });  

}
 });
});

这是我为更好理解而准备的JSFiddle链接。

https://jsfiddle.net/5g3yxrz4/

Answer 1

试试这个

const max = 12; // Maximum to show
...
var i = 0;
...
else if(i++ < max) {
...

https://jsfiddle.net/5g3yxrz4/3/

刚刚为show＆＃34; tr＆＃34;

添加了计数器

Answer 2

你可以这样做：https://jsfiddle.net/5g3yxrz4/5/

$("#search").on("keyup", function() {
var value = $(this).val();
var showRowsLimit = 12;
var rowsShowing = 0;
$("table tr").each(function(index) {
    if (index !== 0) {
        $row = $(this);
        $row.find('td').each (function() {
            var id = $(this).text();
            if (this.innerHTML.toLowerCase().indexOf(value.toLowerCase()) !== 0 || rowsShowing>=showRowsLimit) {
                $row.hide();
            }
            else {
                $row.show();
                rowsShowing++;
                return false;
            }
        });  
    }
});
});

如何使用jQuery限制表记录的搜索结果数量？

2 个答案: