table树
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 产品分类管理 </title> <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript"> $().ready(function () { var $goodsCategoryName = $("#listTable .goodsCategoryName"); // 树折叠 $goodsCategoryName.click(function () { var grade = $(this).parent().attr("grade"); var isHide; $(this).parent().nextAll("tr").each(function () { var thisLevel = $(this).attr("grade"); if (thisLevel <= grade) { return false; } if ($(this).attr("grade") == "" + (parseInt(grade) + 1)) { if (isHide == null) { if ($(this).is(":hidden")) { isHide = true; } else { isHide = false; } } if (isHide) { $(this).show(); } else { $(this).hide(); } } }); }); }) </script> </head> <body> <table id="listTable" class="listTable"> <tr> <th class="check"> <input id="chk_all" onclick="select_all(this);" type="checkbox" /> </th> <th> <span>名称(下级数量)</span> </th> <th> <span>排序</span> </th> <th> <span>审核</span> </th> <th> <span>加新</span> </th> <th> <span>首页导航显示</span> </th> <th> <span>楼层显示</span> </th> <th> <span>操作</span> </th> </tr> <tr grade="0"><td><input name="checkboxs" type="checkbox" value="475" /></td><td class="goodsCategoryName"><span class="pointer firstCategory" style="margin-left: 0px;">进口水果、国产水果(38)</span></td><td>0</td><td><span class='trueIcon'> </span></td><td><span class='falseIcon'> </span></td><td><span class='trueIcon'> </span></td><td><span class='falseIcon'> </span></td><td><a href="ProductType_Add.aspx?id=475">编辑</a> <a href="Similar_Add.aspx?id=475">同类推荐</a></td></tr><tr grade="1" style="display: none;"><td><input name="checkboxs" type="checkbox" value="506" /></td><td class="goodsCategoryName"><span class="pointer category" style="margin-left: 20px;">木瓜(2)</span></td><td>0</td><td><span class='trueIcon'> </span></td><td><span class='falseIcon'> </span></td><td><span class='trueIcon'> </span></td><td><span class='falseIcon'> </span></td><td><a href="ProductType_Add.aspx?id=506">编辑</a> <a href="Similar_Add.aspx?id=506">同类推荐</a></td></tr>
</table> </div> </body> </html>