Глобальная переменная?!
Вообщем:
<html> <head> <title>List by workers</title> <link href="../static/style.css" rel="stylesheet"> <script src="../static/jquery.js"></script> <script src="../static/common.js"></script> </title> </head> <body> <div align="center"> <table cellspacing="5" cellpadding="5" border="0" width="1000px"> <!-- Add new object --> <tr> <td align="right"> <a href="_newProject.html" style="border:solid 1px silver; padding:2px; text-decoration:none">Add new Project</a> <a href="_newWorker.html" style="border:solid 1px silver; padding:2px; text-decoration:none">Add new Worker</a> </td> </tr> <!-- Filer --> <tr> <td align="center" style="border-bottom:solid 1px silver;"> <input type="text" name="worker_search" value="Filter by workers ..." style="color:silver; border:solid 1px silver; width:250px;"/> <input type="submit" name="Filter" value="Filter" /> </td> </tr> <!-- Type of view --> <tr> <td> <a href="../index.php" style="border:solid 1px silver; padding:2px; text-decoration:none">List by Projects</a> <a href="_listWorker.html" style="border:solid 1px silver; padding:2px; text-decoration:none">List by Workers</a> </td> </tr> <!-- List of objects --> <tr> <td> <!-- List of projects --> <table width="100%"> <tr> <th style="border:solid 1px silver;">Id</th> <th style="border:solid 1px silver;">Worker name</th> <th style="border:solid 1px silver;">Action</th> </tr> <tr class="filter" data-id="18"> <td>1</td> <td valign="top">Alex<br /> <ul> <li data-id="7">project 1 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="29">project 4 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="41">project 3 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="39">project 2 [<a href="#" id="p_del">Delete</a>]</li> </ul> </td> <td width="150px" valign="top">[<a href="_assignProject.html?worker_id=18">Assign project</a>]</td> </tr> <tr class="filter" data-id="31"> <td>2</td> <td valign="top">Anastasiya<br /> <ul> <li data-id="43">project 7 [<a href="#" id="p_del">Delete</a>]</li> </ul> </td> <td width="150px" valign="top">[<a href="_assignProject.html?worker_id=31">Assign project</a>]</td> </tr> <tr class="filter" data-id="22"> <td>3</td> <td valign="top">Boris<br /> <ul> <li data-id="7">project 1 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="37">project 6 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="29">project 4 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="41">project 3 [<a href="#" id="p_del">Delete</a>]</li> </ul> </td> <td width="150px" valign="top">[<a href="_assignProject.html?worker_id=22">Assign project</a>]</td> </tr> <tr class="filter" data-id="24"> <td>4</td> <td valign="top">Dmitry<br /> <ul> <li data-id="39">project 2 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="7">project 1 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="41">project 3 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="37">project 6 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="29">project 4 [<a href="#" id="p_del">Delete</a>]</li> </ul> </td> <td width="150px" valign="top">[<a href="_assignProject.html?worker_id=24">Assign project</a>]</td> </tr> <tr class="filter" data-id="27"> <td>5</td> <td valign="top">Marina<br /> <ul> <li data-id="7">project 1 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="29">project 4 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="41">project 3 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="37">project 6 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="39">project 2 [<a href="#" id="p_del">Delete</a>]</li> </ul> </td> <td width="150px" valign="top">[<a href="_assignProject.html?worker_id=27">Assign project</a>]</td> </tr> <tr class="filter" data-id="23"> <td>6</td> <td valign="top">Olya<br /> <ul> <li data-id="39">project 2 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="29">project 4 [<a href="#" id="p_del">Delete</a>]</li> <li data-id="41">project 3 [<a href="#" id="p_del">Delete</a>]</li> </ul> </td> <td width="150px" valign="top">[<a href="_assignProject.html?worker_id=23">Assign project</a>]</td> </tr> </table> </td> </tr> </table> </div> </body> </html>
$(function () {
table = {};
$(document)
...
.on('click', 'input[name="Filter"]', function (e) {
var worker = $.trim($('input[name="worker_search"]').val());
if (worker != 'Filter by workers ...') {
if ($.isEmptyObject(table)) table = $('tr[class="filter"]').detach();
table.each(function () {
var str = $(this).children().eq(1).text();
//console.log($.trim(/^[^\s]+/.exec(str)[0]));
if ($.trim(/^[^\s]+/.exec(str)[0]) != worker) {
console.log($(this));
$(this).html('');
}
});
alert('after detach()');
table.appendTo($('table').eq(1));
}
else return false;
})
...
при нажатии на кнопку "фильтр", вырезается кусок таблицы с деревом категорий и подкатегорий, который отфильтровуется и вставляется обратно в таблицу. Но при следующем нажатии на кнопку "фильтр", берется уже отфильтрованный кусок. Как сделать так чтобы table = $('tr[class="filter"]').detach(); имела всегда первоначальное содержимое?! |
например можно вынести переменную
var $filter = $('tr[class="filter"]');
за пределы функции .on('click', и там её использовать if ($.isEmptyObject(table)) table = $filter.detach(); тогда она не будет пере определяться при каждом клике |
| Часовой пояс GMT +3, время: 16:26. |