您的位置：首页 > Web前端 > JavaScript

JavaScript DOM操作表格案例

2017-10-14 15:53 1116 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航