js\jQuery分层显示

最新推荐文章于 2021-04-15 12:28:32 发布

beinlife

最新推荐文章于 2021-04-15 12:28:32 发布

阅读量1.3k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/beinlife/article/details/54376520

版权

javaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<title>分层显示</title>
<meta charset="utf-8" />
<script type="text/javascript" src="C:\Users\solexit06\Desktop\jquery.min.js"></script>
<script>
    /*传过来的数据格式*/
  var names=[{"sqr":'张三',"id":101},
    {"sqr":'李四',"id":102},
    {"sqr":'王五',"id":103}];
  var details=[
    [{"lh":'10310201',"pm":"AC烤白漆0","sqsl":"2000G","wfsl":"2000G","kw":"103","cw":"E1A01-103","mainid":101},
     {"lh":'10310201',"pm":"AC烤白漆3","sqsl":"2000G","wfsl":"2000G","kw":"103","cw":"E1A01-103","mainid":101}],
    [{"lh":'10310201',"pm":"AC烤白漆4","sqsl":"2000G","wfsl":"2000G","kw":"103","cw":"E1A01-103","mainid":102},
     {"lh":'10310201',"pm":"AC烤白漆6","sqsl":"2000G","wfsl":"2000G","kw":"103","cw":"E1A01-103","mainid":102}],
    [{"lh":'10310201',"pm":"AC烤白漆7","sqsl":"2000G","wfsl":"2000G","kw":"103","cw":"E1A01-103","mainid":103},
     {"lh":'10310201',"pm":"AC烤白漆9","sqsl":"2000G","wfsl":"2000G","kw":"103","cw":"E1A01-103","mainid":103}]
  ];

    window.onload=function(){
        var divOut=$("<div></div>");   
        /*遍历*/
        for (var i = 0; i < names.length; i++) {
            var div=$("<div></div>");
            div.attr("id","col_break");
            div.html(names[i].sqr);     

            var table=$("<table></table>");
            for (var j = 0; j < details[i].length; j++) {
                var tr=$("<tr></tr>");
                /*编号col*/
                var tdImg=$("<td></td>");
                tdImg.html(j+1);
                tdImg.attr("id","imgPart");
                /*内容col*/
                var tdField=$("<td></td>");
                tdField.attr("id","fieldPart");
                var divlh=$("<div></div>");
                divlh.html("料号："+details[i][j].lh);
                divlh.attr("id","titleRow");
                var divpm=$("<div></div>");
                divpm.html("品名："+details[i][j].pm);
                divpm.attr("id","rowWrap");
                var divsqsl=$("<div></div>");
                divsqsl.html("申请："+details[i][j].sqsl);
                divsqsl.attr("id","rowWrap");
                var divwfsl=$("<div></div>");
                divwfsl.html("未发："+details[i][j].wfsl);
                divwfsl.attr("id","rowWrap");
                var divkw=$("<div></div>");
                divkw.html("库位："+details[i][j].kw);
                divkw.attr("id","rowWrap");
                var divcw=$("<div></div>");
                divcw.html("储位："+details[i][j].cw);
                divcw.attr("id","rowWrap");
                tdField.append(divlh);
                tdField.append(divpm);
                tdField.append(divsqsl);
                tdField.append(divwfsl);
                tdField.append(divkw);
                tdField.append(divcw);
                /*tr*/
                tr.append(tdImg);
                tr.append(tdField);
                /*table*/
                table.append(tr);
            };

            divOut.append(div);
            divOut.append(table);
        }

        /*将文档片段添加到table中*/
        var mydiv=$("#box");
        mydiv.append(divOut);

        /*添加双击事件*/
        var mytrs=document.querySelectorAll("#fieldPart");
        for (var i = 0; i < mytrs.length; i++) {
            mytrs[i].addEventListener("click",function(){
                console.log(this);
            },false);
        };

        var mydivs=document.querySelectorAll("#col_break");
        for (var i = 0; i < mydivs.length; i++) {
            mydivs[i].addEventListener("click",function(){
                console.log(this);
            },false);
        };
    }
</script>
<style>
    * {
      font-family: 'Microsoft YaHei', Arial;
    }
    #col_break {
    background-color: #F5F5F5;
    padding: 6px 0;
    position: relative;
    box-sizing: border-box;
    height: 36px;
    margin-bottom:-2px;
    }
    table{
        width:300px;
        border-collapse:collapse;
    }
    tr,td{
        border-top:1px solid #ccc;
    }
    #imgPart{
    width: 20px;
    }
    #fieldPart {
    padding: 10px 20px 10px 10px;
    vertical-align: top;
    }
    #titleRow{
    font-size: 15px;
    font-weight: bold;
    padding-top: 0;
    color: #333;
    }
    #rowWrap {
    font-size: 12px;
    margin-top: 2px;
    line-height: 16px;
    color: #333;
    }

</style>
</head>
<body>
    <div id="box" ></div>
</body>

</html>

beinlife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js\jQuery分层显示

<!DOCTYPE HTML><html><head><title>分层显示</title><meta charset="utf-8" /><script type="text/javascript" src="C:\Users\solexit06\Desktop\jquery.min.js"></script><script> /*传过来的数据格式*/ var names=
复制链接

扫一扫