您的位置：首页 > Web前端 > JavaScript

JavaScript实现动态查询表格

2009-03-13 07:56 597 查看

JavaScript实现的一个动态查询表格，随着文本框中资料的改变，下边Table中的资料会自动筛选。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<mce:script type="text/javascript"><!--
//the function of trim
String.prototype.trim = function(){
return this.replace(/(^/s*)|(/s*$)/g,"");
}
//the function of startsWith
String.prototype.startsWith = function(str)
{return (this.match("^"+str)==str)}

function changeModel(obj) {
var model = obj.value.toUpperCase();
var tbl = document.getElementById("tblResult");
var i = tbl.rows.length;
var counter = 0;
if (model == null || model.trim() == "") {
for ( var j = 0; j < i; j++) {
tbl.rows[j].style.display = "block";
counter++;
}
document.getElementById("lblMessage").innerText = "Total : "
+ counter + " rows ";
return;
}
for ( var j = 1; j < i; j++) {
if (tbl.rows[j].cells[0].innerText.startsWith(model)) {
tbl.rows[j].style.display = "block";
counter++;
} else {
tbl.rows[j].style.display = "none";
}
}
document.getElementById("lblMessage").innerText = "Total : " + counter
+ " rows ";
}
// --></mce:script>
</head>
<body>
<form action="">
<div style="width: 294px; height: 25px; overflow: auto; font-size: 8pt;">Selector : <input
type="text" id="txtModel" name="txtModel" maxlength="25" size="25"
onkeydown="if (event.keyCode==13) return false;" onkeyup="changeModel(this);"
style="font-size: 8pt;text-transform: uppercase;">
<label id="lblMessage"></label></div>
<div style="width: 294px; height: 375px; overflow: auto;">
<table id="tblResult" style="font-size: 8pt;" mce_style="font-size: 8pt;" cellpadding="0"
cellspacing="0" border="1" width="100%" bordercolor="#FFFFAA">
<tr>
<td>Title</td>
</tr>
<mce:script type="text/javascript"><!--
for(var i = 0; i < 100; i++){
document.write('<tr><td><a href="#" mce_href="#" onclick="giveValueBack(this);">');
document.write(i);
document.write('</a></td></tr>');
}

// --></mce:script>
</table>
</div>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript function table border action java

相关文章推荐

新的分享

章节导航