<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Javascript Table </title>
<script type="text/javascript">
//方式1：用一般的DomAPI
function createTable1() {
var table = document.createElement("table");
table.setAttribute("border", "1px");
table.setAttribute("width", "100%");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//第一行
var tr1 = document.createElement("tr");
tbody.appendChild(tr1);
var td11 = document.createElement("td");
td11.appendChild(document.createTextNode("hello word cell 1，1"));
tr1.appendChild(td11);
var td12 = document.createElement("td");
td12.appendChild(document.createTextNode("hello word cell 1，2"));
tr1.appendChild(td12);
//第二行
var tr2 = document.createElement("tr");
tbody.appendChild(tr2);
var td21 = document.createElement("td");
td21.appendChild(document.createTextNode("hello word cell 2，1"));
tr2.appendChild(td21);
var td22 = document.createElement("td");
td22.appendChild(document.createTextNode("hello word cell 2，2"));
tr2.appendChild(td22);
return table;
}
//方式2：用Table自带的DomAPI
function createTable2() {
var table = document.createElement("table");
table.setAttribute("border", "1px");
table.setAttribute("width", "100%");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
//第一行
var rowIndex = 0;
var colIndex = 0;
tbody.insertRow(rowIndex);
tbody.rows[rowIndex].insertCell(colIndex);
tbody.rows[rowIndex].cells[colIndex].appendChild(document.createTextNode("hello word cell 1，1")); colIndex++; //列索引递增
tbody.rows[rowIndex].insertCell(colIndex);
tbody.rows[rowIndex].cells[colIndex].appendChild(document.createTextNode("hello word cell 1，2")); colIndex++;
rowIndex++; //行索引递增
colIndex = 0;
//第二行
tbody.insertRow(rowIndex);
tbody.rows[rowIndex].insertCell(colIndex);
tbody.rows[rowIndex].cells[colIndex].appendChild(document.createTextNode("hello word cell 2，1")); colIndex++; //列索引递增
tbody.rows[rowIndex].insertCell(colIndex);
tbody.rows[rowIndex].cells[colIndex].appendChild(document.createTextNode("hello word cell 2，2")); colIndex++;
rowIndex++; //行索引递增
colIndex = 0;
return table;
}
function initTable() {
document.body.appendChild(document.createTextNode("1.用一般的DomAPI方式："));
var table1 = createTable1();
document.body.appendChild(table1);
document.body.appendChild(document.createElement("br"));
document.body.appendChild(document.createTextNode("2.用Table自带API方式："));
var table2 = createTable2();
document.body.appendChild(table2);
}
</script>
</head>
<body onload="initTable()">
<div id="show">
</div>
</body>
</html>