За последние 24 часа нас посетил 16621 программист и 1643 робота. Сейчас ищут 1215 программистов ...

Фильтр данных таблицы, jquery

Тема в разделе "JavaScript и AJAX", создана пользователем pavell, 19 авг 2008.

  1. pavell

    pavell Активный пользователь

    С нами с:
    1 авг 2008
    Сообщения:
    15
    Симпатии:
    0
    с jquery знаком поверхностно. просто подскажите чем пользоваться.
    есть таблица и для нее необходимо сделать фильтр --текстовое поле, при вводе символов в которое, строки таблицы не содерфащие этих символов скрываются
    Код (Text):
    1. <form>
    2.     <input type="text" name="filter" onchange="Filter(this.value)" onKeyUp="Filter(this.value)">
    3. </form>
    4. <table id="langval">
    5. <tr class="filter" >
    6.     <td >{$var1}</td>
    7.     <td ><a href={$url1}>{$var2}</a></td>
    8.     <td >{$var3}</td>
    9. </tr>
    10. .......
    11. </table>
    12. {literal}
    13. &lt;script>
    14.     function Filter(item)
    15.     {  
    16.         if (item > '')
    17.         {
    18.             $(".filter").hide();
    19.             $(".filter:contains('" + item + "')").show();
    20.         }
    21.         else
    22.             $(".filter").show();
    23.     }
    24. </script>
    25. {/literal}
    Что мне здесь не нравится: с помощью метода :contains() осуществляется регистрозависимый поиск, может как-нибуди можно достучаться до каждого <td> и привести его содержание к одному регистру, а потом проверять? как организовать подсветку?
     
  2. pavell

    pavell Активный пользователь

    С нами с:
    1 авг 2008
    Сообщения:
    15
    Симпатии:
    0
    в общем, с подсветкой справился, а насчет поиска русских букв вопрос открыт:
    Код (Text):
    1.  
    2. <script>
    3.     function Filter(item)
    4.     {  
    5.         if (item > '')
    6.         {
    7.             $(".filter").hide();
    8.             $(".filter:contains('" + item + "')").show();
    9.             highlight(document.getElementById("langval"),item);
    10.         }
    11.         else
    12.         {
    13.             $(".filter").show();
    14.         }
    15.     }
    16.  
    17.     function highlight(region,item) {
    18.             if (item.hasChildNodes) {
    19.                 var hi_cn;
    20.                 for (hi_cn=0;hi_cn<item.childNodes.length;hi_cn++) {
    21.                 highlight(item.childNodes[hi_cn],word);
    22.                 }
    23.             }
    24.             if (item.nodeType == 3) {
    25.             tempitemVal = item.nodeValue.toLowerCase();
    26.             tempWordVal = word.toLowerCase();
    27.             if (tempitemVal.indexOf(tempWordVal) != -1) {
    28.                 pn = item.parentNode;
    29.                 if (pn.className != "searchword") {
    30.                     nv = item.nodeValue;
    31.                     ni = tempitemVal.indexOf(tempWordVal);
    32.                     before = document.createTextNode(nv.substr(0,ni));
    33.                     docWordVal = nv.substr(ni,word.length);
    34.                     after = document.createTextNode(nv.substr(ni+word.length));
    35.                     hiwordtext = document.createTextNode(docWordVal);
    36.                     hiword = document.createElement("span");
    37.                     hiword.className = "searchword";
    38.                     hiword.appendChild(hiwordtext);
    39.                     pn.insertBefore(before,item);
    40.                     pn.insertBefore(hiword,item);
    41.                     pn.insertBefore(after,item);
    42.                     pn.removeChild(item);
    43.                 }
    44.             }
    45.         }
    46.     }
    47. </script>
    48. <style type="text/css">.searchword {
    49.     background-color: yellow;
    50. }</style>