javascript Table

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Javascript Table </title>

//方式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>

</div>

</body>

</html>