利用JS写的Table树结构

最新推荐文章于 2024-07-26 15:35:35 发布

濤子

最新推荐文章于 2024-07-26 15:35:35 发布

阅读量3.1k

点赞数

分类专栏： JAVA 文章标签： table javascript function iterator border null

本文链接：https://blog.csdn.net/ning109314/article/details/5956964

版权

本文介绍如何在管理平台上创建一个动态的、多级的树状Table展示。通过JavaScript和DOM操作，实现根据需要加载不同层级的数据。文章提供了一个使用jQuery的示例，包括展开/折叠节点、异步加载子节点等功能。

摘要由CSDN通过智能技术生成

最近因为工作需要在管理平台中添加一个类似树结构的Table数据显示，要是说只是树结构显示的话就太简单了，而且如果只是两级就更好了。但是需求是不定的，也就是说说不准有多少级，可能是因为自己对JS及DOM的理解不是太深吧，就一直没写出多级的来，今天有空看了看DOM的各类方法应用，总算写出来了，就贴出主要的来供大家参考吧

<%@page language="java" import="java.util.*" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" src="../js/jquery-1.2.1.js"></script>
<script>
   var spaceStr="  ";
   function showSon(id){
      var obj=document.getElementById(id);
   if(obj){
    var size=parseInt(obj.value);
    for(var i=0;i<size;i++){
     var selTr=document.getElementById(id+i);
     if(selTr.style.display=="none"){
     selTr.style.display="block";
     }else{
      selTr.style.display="none";
     }
    }
   }
   }
   function selParent(a,id){
   var imgUrl=document.getElementById(id);
   var tb=document.getElementById("list-table");
   var beforeTr=a.parentNode.parentNode.parentNode;
   var url=imgUrl.src;
   var str=url.substring(url.lastIndexOf("/")+1);
   if(str=="menu_plus.gif"){