DOM基礎(chǔ)教程之使用DOM控制表格
表格的css控制就先不說了,首先分享下表格常用的DOM
表格添加操作的方法常用的為insertRow()和insertCell()方法。
row是從零開始計算起的,例如:
是指將新行添加到第二行。
var aText = new Array();
aText[0] = document.createTextNode("fresheggs");
aText[1] = document.createTextNode("W610");
aText[2] = document.createTextNode("Nov 5th");
aText[3] = document.createTextNode("Scorpio");
aText[4] = document.createTextNode("1038818");
for(var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
變量oTr即為表格插入新行,再利用insertCell為這行插入新的數(shù)據(jù),利用createTextNode創(chuàng)建新的文本節(jié)點,在appendChild給oTd,oTd即為新的單元格。
1.插入一行(動態(tài)添加表格)
<script type="text/javascript">
window.onload=function(){
var oTr = document.getElementById("member").insertRow(2); //插入一行
var aText = new Array();
aText[0] = document.createTextNode("fresheggs");
aText[1] = document.createTextNode("W610");
aText[2] = document.createTextNode("Nov 5th");
aText[3] = document.createTextNode("Scorpio");
aText[4] = document.createTextNode("1038818");
for(var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
</script>
<table class="datalist" summary="list of members in EE Studay" id="member">
<caption>Member List</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
2.修改表格的內(nèi)容
當(dāng)表格建立后,可以直接使用HtmlDom對表格進行操作,相比document.getElementById(),document.getElementsByTagName()操作更為方便。
oTable.rows[i].cell[j]
以上通過rows、cells兩個屬性輕松訪問到表格特定的內(nèi)容第i行和第j列(都是從0開始計數(shù)),獲得單元格對象后就可以使用innerHTML屬性修改翔宇的內(nèi)容了。
例如修改4行5列的內(nèi)容為good
則可以使用以下代碼
var oTable = document.getElementById("table1");
oTable.rows[4].cells[5].innerHTML = "good";
3.刪除表格內(nèi)容
表格既然有添加、修改、就有刪除功能。
表格中刪除行使用deleteRow(i)方法,其中i為行號。
表格中刪除列使用tr的deleteCell(j)方法。
如下代碼表示刪除表格的第二行及原來表格第三行的第二列
如下代碼表示刪除表格的第二行及原來表格第三行的第二列 考慮到動態(tài)刪除又不影響整體html框架,又或者表格內(nèi)容很多的情況下,可以采用動態(tài)刪除添加的辦法
<script type="text/javascript">
window.onload=function(){
var oTr = document.getElementById("member").insertRow(2); //插入一行
var aText = new Array();
aText[0] = document.createTextNode("fresheggs");
aText[1] = document.createTextNode("W610");
aText[2] = document.createTextNode("Nov 5th");
aText[3] = document.createTextNode("Scorpio");
aText[4] = document.createTextNode("1038818");
for(var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
</script>
<table class="datalist" summary="list of members in EE Studay" id="member">
<caption>Member List</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
<tr>
<td>isaac</td>
<td>W13</td>
<td>Jun 24th</td>
<td>Cancer</td>
<td>1118159</td>
</tr>
<tr>
<td>girlwing</td>
<td>W210</td>
<td>Sep 16th</td>
<td>Virgo</td>
<td>1307994</td>
</tr>
<tr>
<td>tastestory</td>
<td>W15</td>
<td>Nov 29th</td>
<td>Sagittarius</td>
<td>1095245</td>
</tr>
</table>
刪除列
function deleteColumn(oTable, iNum) {
//自定義刪除列函數(shù),即每行刪除相應(yīng)單元格
for (var i = 0; i < oTable.rows.length; i++)
oTable.rows[i].deleteCell(iNum);
}
window.onload = function() {
var oTable = document.getElementById("table1");
deleteColumn(oTable, 2);
}
對于刪除表格列而言,DOM中沒有直接可調(diào)用的方法,需要自己來寫deleteColumn()方法,該方法接受兩個參數(shù),一個參數(shù)是表格對象,另外一個參數(shù)則是希望刪除的列號。編寫方法很簡單,利用deleteCell()方法,每一行都執(zhí)行相應(yīng)的刪除單元格的方法。
相關(guān)文章
Javascript基礎(chǔ)教程之?dāng)?shù)據(jù)類型 (布爾型 Boolean)
本文簡單講解了javascript數(shù)據(jù)類型中的布爾型(boolean),十分的簡單,小伙伴們看下就明白了2015-01-01在JavaScript中操作數(shù)組之map()方法的使用
這篇文章主要介紹了在JavaScript中操作數(shù)組之map()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06寫給想學(xué)習(xí)Javascript的朋友一點學(xué)習(xí)經(jīng)驗小結(jié)
今天逛論壇時看到有朋友問,是否有專門教Javascript的學(xué)校,這里想想把自己的一點建議和自己3年來的前端Javascript開發(fā)的經(jīng)驗跟大家分享下,也給出幾本個人認(rèn)為不錯的書來做為大家學(xué)習(xí)的參考資料。2010-11-11