js动态加载数据并合并单元格

最新推荐文章于 2021-04-05 12:32:40 发布

weixin_30289831

最新推荐文章于 2021-04-05 12:32:40 发布

阅读量173

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/AmbiguousMiao/p/7132287.html

版权

js动态加载数据合并单元格，

代码如下所示，可复制直接运行：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>td{padding:2px 30px}</style>
</head>
<body>
<script type="text/javascript">
    var num =0;
    window.onload=function(){
    var myData=[
                    ["姓名","年龄","科目"],
                    ['张三','11',"语文"],
                    ['张三','11',"数学"],
                    ['张三','11',"数学"],
                    ['李四','11',"数学"],
                    ['李四','11',"数学"],
                    ['李四','11',"数学"],
                    ['www','11',"数学"],
                    ['www','11',"数学"],
                    ['www','11',"数学"],
                    ['www','11',"数学"]
               ]
    var str="<table border='1' cellspacing='0' cellpadding='0'><tbody>";
    var c=0;
    for(var i=0; i<myData.length; i++){
        if(i > 0) {
            if (myData[i][0] == myData[i - 1][0]) {
                str+="<tr><td>"+myData[i][1]+"</td><td>"+myData[i][2]+"</td></tr>";
            }else {
                 str+="</tbody>";
                  str+="<tbody>";
                  str+="<tr><td rowspan='1000'>"+myData[i][0]+"</td><td>"+myData[i][1]+"</td><td>"+myData[i][2]+"</td></tr>";
            }
        }else{
            str+="<tr><td>"+myData[i][0]+"</td><td>"+myData[i][1]+"</td><td>"+myData[i][2]+"</td></tr>";
        }
    }
    str+='</tbody></table>';
    //console.log(str);
    document.getElementById("table").innerHTML=str;
}
</script>
<div id="table" ></div>
</body>
</html>