1. 程式人生 > >創建表格的方法

創建表格的方法

end htm borde ins order del 字符 function col

1.字符串的的拼接

function createTable (rows,cols){
var html = "<table>";
for(var i = 0;i<rows;i++){
html+="<tr>";
for(var j = 0;j<cols;j++){
html+="<td style = ‘border:1px solid red; padding:5px 30px;‘>"+rows+"行"+cols+"列"+"</td>"
}
html+="</tr>"
}

html += "<table>";
oDiv.innerHTML = html;

2.創建追加節點

function createTable (rows,cols){
var fragment=document.createDocumentFragment();//創建文檔碎片
var cTable = document.createElement("table");
for(var i = 0;i<rows;i++){
var cTr = document.createElement("tr");
for(var j = 0;j<cols;j++){
var cTd = document.createElement("td");
cTd.style.cssText = "padding: 5px 30px; border: 1px solid red;";
cTd.innerHTML = "111111";
cTr.appendChild(cTd);
}
cTable.appendChild(cTr);
}
fragment.appendChild(cTable);
oDiv.appendChild(fragment);

}

3.

<table border="1">

</table>

var oTable=document.getElementsByTagName(‘table‘)[0];
//alert(oTable.rows.length);//獲取行
//alert(oTable.rows[0].cells.length);
//insertRow(index); //insertRow() 方法用於在表格中的指定位置(index)插入一個新行。
//insertCell(index);//方法用於在 HTML 表的一行的指定位置插入一個空的 <td> 元素。
//deleteRow(); 方法用於從表格刪除指定位置的行。
//deleteCell();
var oTr=null;
var oTd=null;
for(var i=0;i<10;i++){
oTr=oTable.insertRow(i);//i:第幾行
for(var j=0;j<10;j++){
oTd=oTr.insertCell(j);
oTd.innerHTML=‘1111111111‘+j;
}
}

創建表格的方法