JavaScript创建表格的两种方式

方式一：

        var data =
            [
                { id: 1, name: "first", age: 12 },
                { id: 2, name: "second", age: 13 },
                { id: 3, name: "three", age: 12 },
                { id: 4, name: "fore", age: 13 },
             ];

        //原始的创建表格方式
        window.onload=function()
        {
            var tableAdd = document.createElement("table")
            tableAdd.id = "table1";
            tableAdd.className = "table1";
            document.getElementById("divTest").appendChild(tableAdd);
           

            for(var i=0;i<data.length;i++)
            {
                var rowData = data[i];
                var newRow = document.createElement("tr");
                tableAdd.appendChild(newRow);

                var newCol0 = document.createElement("td");
                newRow.appendChild(newCol0);
                var checkBox = document.createElement("input");
                checkBox.type = "checkbox";
                newCol0.appendChild(checkBox);


                var newCol = document.createElement("td");
                //双标签有inner属性，表示可以设置内容
                newCol.innerHTML = rowData.id;
                newRow.appendChild(newCol);

                var newCol2 = document.createElement("td");
                //双标签有inner属性，表示可以设置内容
                newCol2.innerHTML = rowData.name;
                newRow.appendChild(newCol2);

                var newCol3 = document.createElement("td");
                //双标签有inner属性，表示可以设置内容
                newCol3.innerHTML = rowData.age;
                newRow.appendChild(newCol3);
            }
            var lastRow = document.createElement("tr");
            tableAdd.appendChild(lastRow);
            var lasttd1 = document.createElement("td");
            lasttd1.colSpan = 4;
            lasttd1.innerHTML = "<input type='checkbox'/>  全选  <a href='#'>删除</a>";
            lastRow.appendChild(lasttd1);
        }
       
    </script>
</head>
<body>
    <div id="divTest" style="border:1px solid #ffd800; width:1000px;height:1200px;">
    </div>
</body>
</html>

效果图如下：

方式二：

 <style type="text/css">
        .table1
        {
            border:1px solid #00ff21;
            width:200px;
            height:200px;
            margin:10px auto;  /*margin 设置 auto可以使居中显示*/
            border-collapse:collapse; /*将td之间的空隙合并*/
        }
        .table1 td
        {
            border:1px solid #00ff21;
            padding:4px;
        }
        .chk{

        }
    </style>
    <script type="text/javascript" language="JavaScript">

     

        //只有表格才有的创建方式
        window.onload = function () {
            var tableAdd = document.createElement("table")
            tableAdd.id = "table1";
            tableAdd.className = "table1";
            document.getElementById("divTest").appendChild(tableAdd);


            for (var i = 0; i < data.length; i++) {
                var rowData = data[i];
                var newRow = tableAdd.insertRow(-1);//-1表示在表格最后追加一行，参数代表要插入行的位置
                newRow.insertCell(-1).innerHTML = "<input type='checkbox' class='chk'/>";
                var newCol = newRow.insertCell(-1);//单元格已经添加导航中，并且返回单元格引用
                //innerHTML是设置双标签的内容字符串，并且会自动解析HTML
                newCol.innerHTML = rowData.id;
                newRow.insertCell(-1).innerHTML = rowData.name;
                newRow.insertCell(-1).innerHTML = rowData.age;
            }

            var lastRow = tableAdd.insertRow(-1);
            var lastCol = lastRow.insertCell(-1);
            lastCol.colSpan = 4;
            lastCol.innerHTML = "<input type='checkbox' id='checkAll'/> 全选 <a href='javascript:del()'>删除</a>";
            document.getElementById("checkAll").onclick = allCheck;
        }

        /*实现全选*/
        function allCheck()
        {
            var res = document.getElementById("checkAll").checked;
            var chks = document.getElementsByClassName("chk");
            for(var i=0;i<chks.length;i++)
            {
                //为所有复选框的选中状态赋值：把全选复选框的选中状态设置给他们
                chks[i].checked = res;
            }
        }

        /*实现删除*/
        function del()
        {
            var chks = document.getElementsByClassName("chk");
            for(var i=0;i<chks.length;i++)
            {
                var chk = chks[i];
                if(chk.checked)
                {
                    //获取复选框所在的行对象
                    var trObj = chk.parentNode.parentElement;
                    //通过行对象的父元素 删除行对象   因为删除只能通过父元素来删
                    trObj.parentElement.removeChild(trObj);
                }
            }
        }

        var data =
            [
                { id: 1, name: "first", age: 12 },
                { id: 2, name: "second", age: 13 },
                { id: 3, name: "three", age: 12 },
                { id: 4, name: "fore", age: 13 },
             ];

效果图如下：

posted on 2016-03-10 20:11 miaoying 阅读(2235) 评论(0) 编辑收藏举报