JavaScript DOM操作表格案例

最新推荐文章于 2022-11-08 11:40:18 发布

原创最新推荐文章于 2022-11-08 11:40:18 发布 · 720 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript DOM操作表格案例 #js获取table数据 #dom

web前端专栏收录该内容

35 篇文章

订阅专栏

本文介绍两种使用DOM创建HTML表格的方法。一种是通过JavaScript手动创建元素并设置属性，另一种是利用`insertRow`和`insertCell`方法快速构建。同时展示了如何通过DOM操作获取表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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>

效果截图：

方式二：（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;