JavaScript DOM操作表格案例

本文介绍两种使用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;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值