javascript创建表格方式详解

KLQ 2020-08-13 15:01:34 java常见问答 7936

你知道javascript创建表格的方式都有哪些吗?下面要给大家讲到就是这方面的内容,具体介绍了两种创建表格的方式。

方式1:

<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
    }
             , ];

javascript创建表格方式

方式2:

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>

javascript创建表格方式

两种创建表格的方式你都了解了吗?更多javascript相关问题,请继续来奇Q工具网的常见问题栏目了解吧。

推荐阅读:

javascript普通for循环和for in循环详解

javascript创建默认对象的方式详解

javascript将字符串字母转换为大小写字母