JQ中动态控制表格行数简单示例

动态页面中控制表格的显示行数很常见，但是在html中好像还没使用过。例如控制下面表格显示N行：

 

 

 

 

略加思考便觉得很简单了，无非就是获取地址栏中的行数参数num，然后利用JQ将num后面的行全部“删除”即可。看看下面的代码吧【比较简单，这里就只贴js代码】：

 

<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function() {
    var num = getPar("num"); //数据显示条数   
    if (!num) num = 10;
    var tab = $("table tbody tr");  //这里定位到需要控制的表格行
    showNum(tab, num);   
});

//保留表格中指定的行数       
function showNum(tab, num) {
    tab.eq(num).nextAll().remove();
}

//取url传递参数
function getPar(name,str){
    var oRegex = new RegExp("[\?&]"+name+"=([^&]+)","i");
    str = str ? "&"+ str : location.search;
    var oMatch = oRegex.exec(str);
    return oMatch&&oMatch[1] ? oMatch[1] : "";
}
//-->
</SCRIPT>

 

 然后我们在地址栏中输入..html?num=5,便可以控制表格显示5行了。