HTML 知识点解析和目录树渲染

程序员文章站 2022-05-06 18:20:57

...

（1）<ul> 和 <li>的区别是什么?

定义不同： ul 是 Unordered List（无序列表）的缩写。<li> 标签定义列表项目（li是lists的缩写）
用法不同: <ul> 标签定义无序列表。使用 <li> 标签定义的列表可以是个无序列表也可以是有序列表。
支持的HTML全局属性不同： <li> 标签支持所有的HTML 全局属性。<ul>标签支持 HTML 中的全局属性：accesskey、class、dir、id、lang、style、tabindex、title。
属性不同: <ul>标签中的属性：compact、type。<ul>标签：id, class, title, style, dir, lang, xml:lang
元素级别不同: ul 是块级元素可以定义宽和高，li表示行排列不能单独使用，需要在ul和ol里面，配合使用

（2）渲染目录树

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>测试树状结构</title>

	<link rel="stylesheet" href="treeview/jquery.treeview.css" />

	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="treeview/jquery.treeview.js" type="text/javascript"></script>


	</head>
	<body>

	<h1 id="banner">数据库表结构树状结构</h1>

    <button> 通过js渲染得到目录树结构</button>

    <p>This is a paragraph.</p>

	<div id="main">
	
        <ul id="navigation" class="tbody">
            <li>t_bb
                <ul>
                    <li>id</li>
                </ul>

                <ul>
                    <li>name</li>
                </ul>
            </li>

    </ul>
	


</div>

</body>


<script type="text/javascript">
	$(document).ready(function(){
        var tablewords = {t_user: ['id','name'],t_student: ['sex','age']} 

        // 文档树渲染
        $("#navigation").treeview({
            persist: "location",
            collapsed: true,
            unique: true
        });

         // 去掉逗号函数   
        function clear_douhao(str) {
            str = str.replace(/,/g, "");//取消字符串中出现的所有逗号
            return str;
        }

        $("button").click(function(){
            $(".tbody").empty();  // 
            var new_ziduan=[];
            for(keys in tablewords){
                var xx_list = tablewords[keys];
                for(j = 0,len=xx_list.length; j < len; j++) {
                    var ziduan="<ul><li>"+xx_list[j]+"</li></ul>";
                    new_ziduan.push(ziduan);
                }
                var new_new_ziduan = clear_douhao(new_ziduan.toString())

                var xuanran_data = "<li>"+keys+new_new_ziduan+"</li>";
                // console.log(xuanran_data);
                $(".tbody").append(xuanran_data);
            }
            
        })
   
	});
	</script>


</html>