行优先和列优先的算法

最新推荐文章于 2023-04-20 15:38:12 发布

web前端执行者

最新推荐文章于 2023-04-20 15:38:12 发布

阅读量3.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zhxh0376/article/details/58588834

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

算法过度有简单到难直接上代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>行优先和列优先的处理</title>
    <link type="text/css" href="rest.css" rel="stylesheet"/>
    <style>
        table {border-right:1px  solid #343c99;  border-top:1px  solid #343c99;}
        table  td{min-width: 100px; padding: 0 15px;text-align: center; height:25px; line-height: 25px;  border-left:1px  solid #343c99;  border-bottom:1px  solid #343c99;}
        p{ line-height: 35px;}
        div{padding-left: 69px;}
    </style>
</head>
<body>
<div>
    <p>我是行优先</p>
    <table>

        <tbody id="row"></tbody>
    </table>
</div>
<div><p>我是列优先</p>
    <table>
        <tbody id="col"></tbody>
    </table>
</div>
<script>

    //转换矩阵数组
   /* var listAll=[], step;
    for(var i=0;i<list.length;i++) {

        var item = list[i];
        var j= 0;
        for(var name in item){
            var obj={};

            obj["rowIndex"]=i;
            obj["colIndex"]=j;
            obj[name]=item[name];
            listAll.push(obj);
            j++;
            step=j;
        }

    }

//行优先
        for(var i=0;i<listAll.length;){
            // str+= list[i][j];
            for(var j=0;j<step;j++){
               str+= list[i][j];

                i++
            }



        }


    //列优先=
    /!*[11,12,13]
    [21,22,23]*!/  //输出的是 11，21，12，22，  13 23

    for(var i=0;i<list.length;i++){
       for(var name in list[0]){
           var j=0;


           j++;
       }
    }
*/
    var list=[{name:"me",age:33},{name:"me2",age:44},{name:"me2",age:44},{name:"me3",age:44}];
    //行优先
    var html="<tr><td>姓名</td><td>年龄</td></tr>"
    for(var i=0;i<list.length;i++) {
        var item = list[i];
        var str="";
        for(var name in item){
                str += "<td>" +item[name]+"</td>";

        }
        html+="<tr>"+str+"</tr>";
    }
  //  document.getElementById("col").innerHTML=html;
    //列优先=
    var html=""
    for(var name in list[0]) {
        var str = "";
        for (var i = 0; i < list.length; i++) {

            str += "<td>" + list[i][name] + "</td>";
        }
        if ("name" == name) {
            html += "<tr>" + "<td>姓名</td>" + str + "</tr>";
        }
        if (name == "age") {
            html += "<tr>" + "<td>年龄</td>" + str + "</tr>";
        }

    }
    //document.getElementById("row").innerHTML=html;
    /*
    * list:要呈现的数据*
    *hasData 列名 *
     * type  行优先row  列优先 col*
     * */
    var list=[
        {name:"me",age:33,sex:0,school:{schoolName:"三中","className":"三年级三班"}}
        ,{name:"me2",age:44,sex:1,school:{schoolName:"三中","className":"三年级一班"}}
        ,{name:"me2",age:44,sex:0,school:{schoolName:"三中","className":"二年级三班"}}
        ,{name:"me3",age:44,sex:0,school:{schoolName:"三中","className":"三年级一班"}}
    ];
    var hasData= {
        name: {value: '姓名'},
        age: {value: '年龄'},
        sex: {
            value: '性别', format: function (value) {
                return value == 0 ? "男" : "女"
            }
        },
        school:{value:"所在学校",format:function(data){
            return data.schoolName+data.className;
        }}
    }
    var rowAndCol=function(data,hasData,type){
     var tdString="<td>{{}}</td>",trString="<tr>{{}}</tr>",html="";
        if(type=="row"){
            for(var i=0;i<list.length;i++) {
                var item = list[i];
                var str="";
                for(var name in item){
                    if(hasData[name].format) {
                        str += tdString.replace("{{}}", hasData[name].format(item[name]));
                    }else{
                        str += tdString.replace("{{}}", item[name]);
                    }
                    if(i==0){// 绘制表头
                        html+=tdString.replace("{{}}",hasData[name].value);
                    }
                }
                if(i==0){
                    html=trString.replace("{{}}",html);//添加表头
                    html+=trString.replace("{{}}",str);
                }else{
                    html+=trString.replace("{{}}",str);
                }

            }

        }else if(type=="col"){
            for(var name in hasData) {
                var str = "";
                for (var i = 0; i < list.length; i++) {
                     var item=list[i];
                    if(hasData[name].format) {
                        str += tdString.replace("{{}}", hasData[name].format(item[name]));
                    }else{
                        str += tdString.replace("{{}}", item[name]);
                    }
                }
                html +=trString.replace("{{}}",tdString.replace("{{}}",hasData[name].value)+str);

            }
        }
        return html
    }
    document.getElementById("row").innerHTML=rowAndCol(list,hasData,"row");
    document.getElementById("col").innerHTML=rowAndCol(list,hasData,"col");
</script>
</body>

住：rest.css 代码

/*
html5doctor.com Reset Stylesheet
v1.4.1
2016-01-03
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

:focus {
    outline: 1;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}