我有一个包含有效和无效项目的表格.此表是从数据库动态填充的.我正在尝试为我的表中的非活动项添加切换并显示所有活动项.我的意思是我想要显示所有活动项目并在我的表格中仅滑动切换非活动项目.
<div class="alertsList">
<table width="100%">
<tbody>
<tr>
<th></th>
<th>Id</th>
<th>From</th>
<th>Action</th>
<th>State</th>
<th>time</th>
<tr class="alertRow">
<td></td>
<td>1025973</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="InActive">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="InActive">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
</tbody>
</table>
</div>
$('.alertRow.InActive').Parent.click(function () {
$(this).nextUntil('tr.td.InActive').slideToggle(1000);
});
我怎样才能做到这一点..？
解决方法
这是切换“非活动”表格行的代码.依靠“nearest()”比“parent()”或“parents()”更好,因为它更快,在这种情况下使用它更有意义.
$(document).ready(function() {
// Save all the inactive rows
var inactive_rows = '';
$('.InActive').closest("tr").each(function() {
inactive_rows += '<tr class="alertRow">';
inactive_rows += $(this).html();
inactive_rows += '</tr>';
});
console.log(inactive_rows);
// Save all the active rows
var active_rows = "";
$('.Active').closest("tr").each(function() {
active_rows += '<tr class="alertRow">';
active_rows += $(this).html();
active_rows += '</tr>';
});
// Empty the table
$('.alertsList').html("");
// Load the new table
var table_html = '<table width="100%"><thead><th></th><th>Id</th><th>From</th><th>Action</th><th>State</th><th>time</th></thead><tbody>';
table_html += active_rows;
table_html += inactive_rows;
table_html += '</tbody></table><a href="" class="toggleInactiveRows">Toggle Inactive Rows</a>';
$('.alertsList').append(table_html);
// Hide the inactive rows when the page loads
$('.InActive').closest("tr").hide();
// Toggle the inactive rows
$('.toggleInactiveRows').click(function() {
$('.InActive').closest("tr").slideToggle();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alertsList">
<table width="100%">
<thead>
<th></th>
<th>Id</th>
<th>From</th>
<th>Action</th>
<th>State</th>
<th>time</th>
</thead>
<tbody>
<tr class="alertRow">
<td></td>
<td>1025973</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="InActive">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="InActive">InActive</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
<tr class="alertRow">
<td></td>
<td>1025974</td>
<td>SYSTEM</td>
<td>false</td>
<td class="Active">Active</td>
<td>2014-09-23T00:59:26.92</td>
</tr>
</tbody>
</table>
<a href="" class="toggleInactiveRows">Toggle Inactive Rows</a>
</div>
