prototype版的table filter

prototype版的table filter

jquery有一个很方便的插件UI Table Filter可以根据输入的内容隐藏显示表格中相应的数据行。
因为目前使用的tapestry捆绑的是prototype,所以就自己写了一个类似的插件。

<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>

如果页面中多个表格,而只需要对其中的一个表格的数据进行过滤的话,简单地把其中:$$('tr').each(function(ele, index) 改成 $$('#tableId, tr').each(function(ele, index) 就行了,其中的tableId就是表格的id

云自无心水自闲 2010-07-28 11:02 发表评论

你可能感兴趣的:(prototype版的table filter)