Вообщем:
<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(); имела всегда первоначальное содержимое?!
