Фильтр строки таблицы в Html

Я создал HTML-страницу, которая имеет искомый текст и таблицу ниже с некоторыми данными о нем в таблицеФильтр строки таблицы в Html

Я использовал код доступен на JSFiddle

Но это не работал. Пожалуйста, предложите что-то вроде примере

Я использую простой HTML, CSS и JavaScript кодирования

В этом JQuery используется:

var $rows = $('#table td'); 
$('#search').keyup(function() { 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

    $rows.show().filter(function() { 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(val); 
    }).hide(); 
});

Могу ли я что-нибудь попроще, так как это гибрид приложение ?

Я использую следующий код Пожалуйста, проверьте

<!DOCTYPE html> 
<html> 
<head> 
<title>Search Box Example 2 - default placeholder text gets cleared on click</title> 
<link rel="stylesheet" href="css/SalesTable.css"> 

<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" /> 
<!-- JAVASCRIPT to clear search text when the field is clicked --> 

<script src="http://code.jquery.com/jquery-2.1.0.js"></script> 
<script type="text/javascript"> 

var $rows = $('#table tr'); 
$('#tfq').keyup(function() { 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

    $rows.show().filter(function() { 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(val); 
    }).hide(); 
}); 

</script> 



<!-- CSS styles for standard search box with placeholder text--> 

</head> 
<body> 
    <!-- HTML for SEARCH BAR --> 
    <div id="tfheader"> 
     <form id="tfnewsearch" method="get" action="http://www.google.com"> 
       <input type="text" id="tfq" class="tftextinput2" name="q" size="21" maxlength="120" placeholder="Type to search"><input type="button" value="Search" class="tfbutton2"> 
     </form> 
     <div class="tfclear"></div> 
    </div> 

    <br> 
    <br> 

    <div id="tableSalesOrder"> 
    <table id="table"> 


    <tr> 
    <th> 
    A 
    </th> 
    <th> 
    B 
    </th> 
    <th> 
    C 
    </th> 
    <th> 
    D 
    </th> 
    </tr> 

    <script language="javascript"> 
    <!-- 

    for(i =0 ;i<4 ; i++) 
    { 
    document.write('<tr>'); 
    document.write('<td>12345</td>') 
    document.write('<td>34566</td>') 
    document.write('<td>345356</td>') 
    document.write('<td>Tyjhue</td>') 
    document.write('<td><form id="approveForm"><input type = "submit" value="ButtonA"></form></td>') 
    document.write('<td><form id="rejectForm"><input type = "submit" value="ButtonB"></form></td>') 
    document.write('<td><form id="detailForm"><input type = "submit" value="ButtonC"></form></td>') 
    document.write('</tr>') 

    } 

    //--> 
    </script> 

    </table> 

    </div> 

</body> 
</html>

источник

2014-02-04 Yatin

Это работает для моего случая использования: http://codepen.io/chriscoyier/pen/tIuBL – ccpizza

включает Jquery

<head> 
    <style type="text/css"> 
     body {padding: 20px;} 
     input {margin-bottom: 5px; padding: 2px 3px; width: 209px;} 
     td {padding: 4px; border: 1px #CCC solid; width: 100px;} 
    </style>  
    </head> 
    <body> 
    <input type="text" id="search" placeholder="Type to search"> 
     <table id="table"> 
     <tr> <td>Apple</td> 
      <td>Green</td> 
     </tr> 
     <tr> <td>Grapes</td> 
      <td>Green</td> 
     </tr> 
     <tr> <td>Orange</td> 
      <td>Orange</td> 
     </tr> 
    </table> 
    <script src="http://code.jquery.com/jquery-2.1.0.js"></script> 
    <script type="text/javascript"> 
    var $rows = $('#table tr'); 
    $('#search').keyup(function() { 
     var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

     $rows.show().filter(function() { 
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
      return !~text.indexOf(val); 
     }).hide(); 
    }); 
    </script> 
    </body>

Выполнить код,

источник

2014-02-04 12:44:03 Karthikeyan

JQuery уже прилагается в скрипичной демки OP в –

Эта вещь работает ... но, пожалуйста, проверьте мой код alsoo – Yatin

Пожалуйста, обновите данную скрипту, которая будет лучшим способом ответа. – MarmiK

код JavaScript должен интерпретироваться после DOM готов.

Поскольку вы используете скрипт в разделе <head>, #table tr элементы еще не готовы; Следовательно, jQuery не может выбрать элементы.

Вы можете использовать .ready() способ проверить, является ли document готов:

$(document).ready(function() { 
    var $rows = $('#table tr'); 
    $('#search').keyup(function() { 
     var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

     $rows.show().filter(function() { 
      var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
      return !~text.indexOf(val); 
     }).hide(); 
    }); 
});

Или поставить <script>...</script> тег в нижней части, перед </body> закрывающим тегом.

Дополнительная информация: http://learn.jquery.com/using-jquery-core/document-ready/

источник

2014-02-04 13:05:30

Это решение работает как чудо. Спасибо @Hashem –

Фильтр строки таблицы в Html

ответ

Смежные вопросы