Posted on 2010-07-28 11:02
云自無(wú)心水自閑 閱讀(1979)
評(píng)論(1) 編輯 收藏 所屬分類(lèi):
心得體會(huì) 、
JQuery 、
Tapestry
jquery有一個(gè)很方便的插件UI Table Filter可以根據(jù)輸入的內(nèi)容隱藏顯示表格中相應(yīng)的數(shù)據(jù)行。
因?yàn)槟壳笆褂玫膖apestry捆綁的是prototype，所以就自己寫(xiě)了一個(gè)類(lèi)似的插件。
<html>
<head>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script language="javaScript">
Event.observe(window, 'load', function() {
Event.observe('filter', 'keyup', filterTable);
});
function filterTable() {
var filterCaseElement = document.getElementById('filterCase');
var caseSensitive = filterCaseElement.checked;
$$('tr').each(function(trElement, ind) {
var val = $('filter').value;
if ( ! caseSensitive ) {
val = val.toLowerCase();
}
trElement.childElements().each(function(tdElememt) {
var tdText = tdElement.innerText;
if ( ! caseSensitive ) {
tdText = tdText.toLowerCase();
}
if (tdText.include(val)) {
trElement.show();
} else if ( ind > 0 ) {
trElement.hide();
}
});
});
}
</script>
</head>
<body>
filter: <input type="text" id="filter" name="filter"/> <input type="checkbox" id="filterCase" onchange="javaScript:filterTable();"/> Case-Sensitive
<table border="1">
<thead>
<tr>
<th>name</th>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
</tr>
</thead>
<tr>
<td>TEST</td>
<td>00150002331</td>
<td>238156</td>
<td>075</td>
<td>001</td>
<td>172.16.14.20</td>
<td>1-1-05</td>
</tr>
<tr>
<td>TEST-2</td>
<td>00150002332</td>
<td>238157</td>
<td>075</td>
<td>002</td>
<td>172.16.14.21</td>
<td>1-1-05</td>
</tr>
<tr>
<td>TEST</td>
<td>00150002333</td>
<td>238158</td>
<td>075</td>
<td>003</td>
<td>172.16.14.23</td>
<td>1-1-05</td>
</tr>
<tr>
<td>TEST</td>
<td>00150002341</td>
<td>238159</td>
<td>075</td>
<td>004</td>
<td>172.16.14.24</td>
<td>1-1-05</td>
</tr>
<tr>
<td>TEST</td>
<td>00150002339</td>
<td>238186</td>
<td>075</td>
<td>006</td>
<td>172.16.14.26</td>
<td>1-1-06</td>
</tr>
</table>
</body>
</html>
如果頁(yè)面中多個(gè)表格，而只需要對(duì)其中的一個(gè)表格的數(shù)據(jù)進(jìn)行過(guò)濾的話，簡(jiǎn)單地把其中：$$('tr').each(function(ele, index) 改成 $$('#tableId, tr').each(function(ele, index) 就行了，其中的tableId就是表格的id