大佬教程收集整理的这篇文章主要介绍了使用jquery扩展和折叠表行(tr)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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);
});
@L_502_0@
我怎样才能做到这一点..？
$(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>
以上是大佬教程为你收集整理的使用jquery扩展和折叠表行(tr)全部内容，希望文章能够帮你解决使用jquery扩展和折叠表行(tr)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。