jquery鏈変竴涓緢鏂逛究鐨勬彃浠禪I Table Filter鍙互鏍規(guī)嵁杈撳叆鐨勫唴瀹歸殣钘忔樉紺鴻〃鏍間腑鐩稿簲鐨勬暟鎹銆?br />
鍥犱負(fù)鐩墠浣跨敤鐨則apestry鎹嗙粦鐨勬槸prototype錛屾墍浠ュ氨鑷繁鍐欎簡(jiǎn)涓涓被浼肩殑鎻掍歡銆?/p>
<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>
濡傛灉欏甸潰涓涓〃鏍鹼紝鑰屽彧闇瑕佸鍏朵腑鐨勪竴涓〃鏍肩殑鏁版嵁榪涜榪囨護(hù)鐨勮瘽錛岀畝鍗曞湴鎶婂叾涓細(xì)$$('tr').each(function(ele, index) 鏀規(guī)垚 $$('#tableId, tr').each(function(ele, index) 灝辮浜?jiǎn)锛屽叾涓殑tableId灝辨槸琛ㄦ牸鐨刬d
]]>