JavaScript 學習筆記（十三）Dom建立表格

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Dom基礎—建立表格
利用js來動態建立表格有兩種格式，appendChild()和insertRow、insertCell()。但第一種有可能在IE上有問題，所以推薦使用第二種。
1、insertRow(index)：index從0開始
這個函數將新行添加到index的那一行前，比如insertRow(0),是將新行添加到第一行之前。預設的insertRow()函數相當於 insertRow(-1)，將新行添加到表的最後。一般我們在使用的時候都是：
objTable.insertRow (objTable.rows.length)就是為表格objTable在最後新增一行。
insertCell()和insertRow的用法相同。
2、deleteRow(index)：index從0開始
刪除指定位置的行，要傳入的參數：Index是行在表格中的位置，可以下面的方法取得然後去刪除：
var row = document.getElementById("行的Id");
var index = row.rowIndex; //有這個屬性
objTable.deleteRow(index);
在使用過程中，刪除表格的行的時候，如果刪除了某一行，那麼表格行數是馬上就變化的，rows.length總是在變小，所以如果你要刪除表格的所有行：複製代碼代碼如下:function removeAllRow() {
var objTable = document.getElementById("myTable");
var length = objTable.rows.length;
for (var i = 1; i < length; i++) {
objTable.deleteRow(i);
}
}

3、setAttribute()方法,動態設定儲存格與行的屬性
格式如下：setAttribute(屬性，屬性值)
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border", 1); //為表格設定邊框為1
在使用的時候遇到一個設定樣式的問題，不能用
setAttribute("class","inputbox1");而應該使用
setAttribute("className","inputbox1")，
4、建立表格
瞭解了行<tr>與儲存格<td>的增刪那就可以建立表格了。
第一步：你需要有一個你去動態變化的表格，這裡講的是已經存在頁面的表格,我們設定一個id：myTable
　　var objMyTable = document.getElementById("myTable");
第二步：建立行與列的對象複製代碼代碼如下:var index = objMyTable.rows.length;
var nextRow = objMyTable.insertRow(index); //在最後的行
//var nextRow = objMyTable.insertRow(0); //在最前的行

下面是範例程式碼複製代碼代碼如下:<script type="text/javascript">
var Count = false; //控制交替換行
var NO = 1; //行號
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();
//設定列內容和屬性
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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More