JavaScript DOM操作表格案例

冷不防 2022-06-07 07:24 239阅读 0赞

**使用DOM创建表格**

**方式一：（JavaScript DOM创建表格）**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            #outer {
                width: 500px;
                height: 500px;
                margin: auto;
            }
        </style>
        <script type="text/javascript">
            onload = function () {
                var outer = document.getElementById("outer");
    			//创建表格对象
                var table = document.createElement("table");
    			//设置表格属性
                table.setAttribute("width", "500px");
                table.setAttribute("height", "200px");
                table.setAttribute("border", "3px");
    
    			//创建表格主题对象
                var caption = document.createElement("caption");
    			//添加表格主题内容（标题）
                caption.innerHTML = "学生表";
    			//将该节点追加到table中
                table.appendChild(caption);
    
    			//创建表格第一行
                var tr1 = document.createElement("tr");
                var th11 = document.createElement("th");
                th11.setAttribute("width", "100px");
                th11.setAttribute("align", "left");
                th11.innerHTML = "姓名";
    
                var th12 = document.createElement("th");
                th12.setAttribute("width", "100px");
                th12.setAttribute("align", "left");
                th12.innerHTML = "年龄";
    
                var th13 = document.createElement("th");
                th13.setAttribute("width", "100px");
                th13.setAttribute("align", "left");
                th13.innerHTML = "性别";
    
     
    
                tr1.appendChild(th11);
                tr1.appendChild(th12);
                tr1.appendChild(th13);
    
                table.appendChild(tr1);
    
    
    			//创建表格第二行
                var tr2 = document.createElement("tr");
    
                var td21 = document.createElement("td");
                td21.setAttribute("width", "100px");
                td21.setAttribute("align", "left");
                td21.innerHTML = "张三";
                var td22 = document.createElement("td");
                td22.setAttribute("width", "100px");
                td22.setAttribute("align", "left");
                td22.innerHTML = "13";
                var td23 = document.createElement("td");
                td23.setAttribute("width", "100px");
                td23.setAttribute("align", "left");
                td23.innerHTML = "男";
    
                tr2.appendChild(td21);
                tr2.appendChild(td22);
                tr2.appendChild(td23);
    
                table.appendChild(tr2);
    
    			//创建表格第三行
                var tr3 = document.createElement("tr");
    
                var td31 = document.createElement("td");
                td31.setAttribute("width", "100px");
                td31.setAttribute("align", "left");
                td31.innerHTML = "张三";
    			
                var td32 = document.createElement("td");
                td32.setAttribute("width", "100px");
                td32.setAttribute("align", "left");
                td32.innerHTML = "13";
    			
                var td33 = document.createElement("td");
                td33.setAttribute("width", "100px");
                td33.setAttribute("align", "left");
                td33.innerHTML = "男";
    
                tr3.appendChild(td31);
                tr3.appendChild(td32);
                tr3.appendChild(td33);
    
                table.appendChild(tr3);
    
                outer.appendChild(table);
            }
        </script>
    </head>
    <body>
    <div id="outer">
    
    </div>
    </body>
    </html>

**效果截图：**

**![Center][]**

**方式二：（HTML DOM创建表格）**

<body>
    <div id="div"></div>
    <script type="text/javascript">
        function test() {
            var div = document.getElementById("div");
            var table = document.createElement("table");//创建表格对象
            table.setAttribute("width", "300px");//设置表格宽度
            table.createCaption().innerHTML = "学生表";//创建caption并加入内容
            var row1 = table.insertRow(0);//插入第一行
            row1.insertCell(0).innerHTML = "姓名";
            row1.insertCell(1).innerHTML = "年龄";
            row1.insertCell(2).innerHTML = "性别";
            var row2 = table.insertRow(1);//插入第二行
            row2.insertCell(0).innerHTML = "张三";
            row2.insertCell(1).innerHTML = "13";
            row2.insertCell(2).innerHTML = "男";
            var row3 = table.insertRow(2);//插入第三行
            row3.insertCell(0).innerHTML = "李四";
            row3.insertCell(1).innerHTML = "18";
            row3.insertCell(2).innerHTML = "女";
            div.appendChild(table);
        }
        test();
    </script>
    </body>

注：在创建表格的时候`<table>`、`<th>`没有特定的方法，需要使用document来创建。

**DOM获取表格数据**

var caption = table.caption.innerHTML;//获取caption表标题数据
    
    var rows = table.rows;//获取表格的所有行
    var cells = rows[0].cells;//获取第一行的所有列
    var innerHTML = cells[0].innerHTML;//获取第一列的值
    //等价于 innerHTML = table.rows[0].cells[0].innerHTML;

[Center]: /images/20220607/c297359752834b50832f347546112e5b.png