|
|
利用js來(lái)動(dòng)態(tài)創(chuàng)建表格有兩種格式，appendChild()和insertRow、insertCell()。但第一種有可能在IE上有問(wèn)題，所以推薦使用第二種。
1、insertRow(index)：index從0開(kāi)始
這個(gè)函數(shù)將新行添加到index的那一行前，比如insertRow(0),是將新行添加到第一行之前。默認(rèn)的insertRow()函數(shù)相當(dāng)于 insertRow(-1)，將新行添加到表的最后。一般我們?cè)谑褂玫臅r(shí)候都是：
objTable.insertRow (objTable.rows.length)就是為表格objTable在最后新增一行。
insertCell()和insertRow的用法相同。
2、deleteRow(index)：index從0開(kāi)始
刪除指定位置的行，要傳入的參數(shù)：Index是行在表格中的位置，可以下面的方法取得然后去刪除：
var row = document.getElementById("行的Id");
var index = row.rowIndex; //有這個(gè)屬性
objTable.deleteRow(index);
在使用過(guò)程中，刪除表格的行的時(shí)候，如果刪除了某一行，那么表格行數(shù)是馬上就變化的，rows.length總是在變小，所以如果你要?jiǎng)h除表格的所有行：
復(fù)制代碼 代碼如下:
function removeAllRow() {
var objTable = document.getElementById("myTable");
var length = objTable.rows.length;
for (var i = 1; i < length; i++) {
objTable.deleteRow(i);
}
}
3、setAttribute()方法,動(dòng)態(tài)設(shè)置單元格與行的屬性
格式如下：setAttribute(屬性，屬性值)
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border", 1); //為表格設(shè)置邊框?yàn)?
在使用的時(shí)候遇到一個(gè)設(shè)置樣式的問(wèn)題，不能用
setAttribute("class","inputbox1");而應(yīng)該使用
setAttribute("className","inputbox1")，
4、創(chuàng)建表格
了解了行<tr>與單元格<td>的增刪那就可以創(chuàng)建表格了。
第一步：你需要有一個(gè)你去動(dòng)態(tài)變化的表格，這里講的是已經(jīng)存在頁(yè)面的表格,我們?cè)O(shè)置一個(gè)id：myTable
var objMyTable = document.getElementById("myTable");
第二步：創(chuàng)建行與列的對(duì)象
復(fù)制代碼 代碼如下:
var index = objMyTable.rows.length;
var nextRow = objMyTable.insertRow(index); //在最后的行
//var nextRow = objMyTable.insertRow(0); //在最前的行
下面是示例代碼
復(fù)制代碼 代碼如下:
<script type="text/Javascript">
var Count = false; //控制交替換行
var NO = 1; //行號(hào)
function addRow() {
Count = !Count;
//添加一行
var newTr = table.insertRow(table.rows.length); //在最后新增一行
//var newTr = table.insertRow(0); //在最前面新增一行
//添加兩列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//設(shè)置列內(nèi)容和屬性
if (Count) {
newTr.style.background = "#FFE1FF";
}
else {
newTr.style.background = "#FFEFD5";
}
NO++;
newTd0.innerHTML = '<input type=checkbox id="box' + NO + '" />';
newTd1.innerText = "第" + NO + "行";
newTd2.innerHTML = '<input type="text" id="Text' + NO + '" />';
}
</script>
<body>
<form id="form1" runat="server">
<input type="button" value="插入行" onclick="addRow()" />
<table width="399" border="0" cellspacing="1" id="table" style="font-size: 14px;">
<tr bgcolor="#FFEFD5">
<td width="6%">
<input type="checkbox" id="box1" />
</td>
<td>
第1行
</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
</table>
</form>
</body>
JavaScript技術(shù)：JavaScript 學(xué)習(xí)筆記（十三）Dom創(chuàng)建表格，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
