Поиск и отображение значений таблиц при вводе

Я ссылаюсь на следующий код из самого стека-переполнения. Но он не работает, каждый может сказать, что мне следует обновить.Поиск и отображение значений таблиц при вводе

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(); 
 
    });

body {padding: 20px;} 
 
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;} 
 
td {padding: 4px; border: 1px #CCC solid; width: 100px;}

<html> 
 
    <head> 
 
    <title>Search Event</title> 
 
    <script type="text/javascript" src="search.js"></script> 
 
    <link href="search.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <center><input type="text" id="search" placeholder="Type to search"></center> 
 
    <center><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></center> 
 
    </body> 
 
</html>

с этим простой концепцией борется так far.so пожалуйста, помогите мне.

источник

2015-10-28 Raju

есть включить файл Jquery? –

Что такое ожидаемый результат? – guest271314

он отлично работает для меня .https: //jsfiddle.net/vq77u88y/ – Rakin

Если я тип ар или яблоко означает значение корреспондентского только должен дисплея, кроме должно скрыть

Примечания, не определенного, если ожидаемый результат для переключения td элементов? Как js в вопросе, кажется, toggle tr элементов? Для переключения td элементов, где вход текста, соответствующих td текста, попробуйте добавить .find("td") перед вызовом в .show() заменить фильтрации td элементов для родительского tr элементы

Если вход «приложение» только td, содержащего текст «Яблоко» должно отображаться

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

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

body {padding: 20px;} 
 
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;} 
 
td {padding: 4px; border: 1px #CCC solid; width: 100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<html> 
 
    <head> 
 
    <title>Search Event</title> 
 
    <script type="text/javascript" src="search.js"></script> 
 
    <link href="search.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <body> 
 
    <center><input type="text" id="search" placeholder="Type to search"></center> 
 
    <center><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></center> 
 
    </body> 
 
</html>

источник

2015-10-28 10:02:17 guest271314

код не работает, потому что ваш "search.js" потребность файла JQuery

в вас код Jquery файл отсутствует с JQuery он работает отлично он должен быть

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="search.js"></script> 
<link href="search.css" rel="stylesheet" type="text/css">

check this fiddle

источник

2015-10-28 08:50:24

-1

Добавлен jquery-1.9.1.js в html ..

<head> 
<title>Search Event</title> 
<script type="text/javascript" src="search.js"></script> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 
<link href="search.css" rel="stylesheet" type="text/css"> 
</head>

Fiddle

источник

2015-10-28 08:53:58 Rakin

Поиск и отображение значений таблиц при вводе

ответ

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