动态页面中控制表格的显示行数很常见,但是在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>
<!--
$(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行了。