JavaScript DOM操作表格案例

来源：互联网发布：激战2人类男捏脸数据库编辑：程序博客网时间：2024/05/17 09:31

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

阅读全文

0 0