JS树形结构筛选和折叠

最新推荐文章于 2024-10-12 16:58:13 发布

放飞放放风

最新推荐文章于 2024-10-12 16:58:13 发布

阅读量860

点赞数

分类专栏： JS小功能

本文链接：https://blog.csdn.net/what_happen_to_you/article/details/109616326

版权

本文介绍如何使用JavaScript对树形结构数据进行筛选和折叠操作，结合示例展示具体实现过程。

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

JS树形结构筛选和折叠

效果图

2.筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树结构</title>
    <style>
        ul.tree, ul.tree ul {
    
            list-style-type: none;
            background-color: red;
            margin: 0;
            padding: 0;
        }

        ul.tree ul {
    
            margin-left: 10px;
        }

        ul.tree li {
    
            margin: 0;
            padding: 0 12px;
            line-height: 20px;
            background-color: pink;
            color: #369;
            font-weight: bold;
        }
        ul.tree li:last-child {
    
            background-color: yellow;
        }
    </style>
    <script>

        //搜索
        function search(){
    
            var treedom = document.getElementById("treeDom")
            //1.获取所有的li
            var li =  treedom.getElementsByTagName("li")
            var searchname = document.getElementById("inputsearch").value;
            if (searchname.length>0){
    
                //如果删除就会全部展开，怎么将他全部折叠
                for( var i = 0 ;i< li.length ; i++){
    
                    if(li[i].innerHTML.toUpperCase().indexOf(searchname)>-1){
    
                        li[i].style.display="block";
                        if( li[i].parentElement){
    
                            li[i].parentElement.style.display="block"
                        }
                    }else{
    
                        li[i].style.display="none";
                        if( li[i].parentElement&& li[i].parentElement.style.display !="block"){
    
                            li[i].parentElement.style.<