javascript當(dāng)中,如何創(chuàng)建一個(gè)table的row和cell?
例 2.2(CreateTRTD3IEFF.html)
馬克- to-win:馬克 java社區(qū):防盜版實(shí)名手機(jī)尾號(hào): 73203。
<HTML>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<TITLE></TITLE>
</HEAD>
<BODY id="body">
</BODY>
</HTML>
<script>
/*Node.appendChild() (Method)
A new child node object is added to the end of the list of immediate children of this node. 馬克-to-win: note: immediate is very important, table and tr is not immidiate,so table can not appendChild tr, while, table can append tbobdy, then tbody append tr. if you really want to connect table and tr, you must use insertRow like in this example.
Document.createElement() (Method)
A method to create a new element within a document.
Property/method value type: Element object
*/
var table = document.createElement("table");
/*TABLE.border (Property)
The width of the border around cells in a table.
*/
table.border=2;
//為表格循環(huán)插入2行
for (var i = 0 ; i < 2 ; i++)
{
/*
TABLE.insertRow() (Method)
Insert a new row into the table at a specified row index.
Property/method value type: TR object
JavaScript syntax: - myTABLE.insertRow(anIndex)
Argument list: anIndex The row at which to insert a new row
馬克-to-win:note that Table has this method of "insertRow" which directly insert a row into a table without passing through tbody.
*/
var tr = table.insertRow(i);
//為每行循環(huán)插入3列
for (var j = 0 ; j < 3 ; j++)
{
/*TR.insertCell() (Method)
You can insert an additional cell into the row within a table with this method.
returned Property/method value type: TD object
*/
var td = tr.insertCell(j);
//設(shè)置每個(gè)單元格的內(nèi)容
td.innerHTML = "車位" + i + j;
}
}
/*
Node.appendChild() (Method)
A new child node object is added to the end of the list of immediate children of this node.
Property/method value type: Node object
JavaScript syntax: - myNode.appendChild(aNode)
Argument list: aNode The node to be appended
*/
document.getElementById("body").appendChild(table);
</script>