欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

DOM基礎(chǔ)教程之使用DOM控制表格

 更新時間：2015年01月20日 16:08:25   投稿：hebedich  
這篇文章主要介紹了DOM基礎(chǔ)教程之使用DOM控制表格的相關(guān)資料,需要的朋友可以參考下

表格的css控制就先不說了，首先分享下表格常用的DOM

表格添加操作的方法常用的為insertRow()和insertCell()方法。

row是從零開始計算起的，例如：

復(fù)制代碼 代碼如下:
var oTr = document.getElementById("member").insertRow(2)

是指將新行添加到第二行。

復(fù)制代碼 代碼如下:

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即為新的單元格?！　?/p>

1.插入一行（動態(tài)添加表格）

復(fù)制代碼 代碼如下:

<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對表格進(jìn)行操作，相比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
則可以使用以下代碼

復(fù)制代碼 代碼如下:

var oTable = document.getElementById("table1");
oTable.rows[4].cells[5].innerHTML = "good";

3.刪除表格內(nèi)容

表格既然有添加、修改、就有刪除功能。
表格中刪除行使用deleteRow(i)方法，其中i為行號。
表格中刪除列使用tr的deleteCell(j)方法。

如下代碼表示刪除表格的第二行及原來表格第三行的第二列

復(fù)制代碼 代碼如下:
var oTable = document.getElementById("table1"); oTable.deleteRow[2]; oTable.rows[2].deleteCell[3];

如下代碼表示刪除表格的第二行及原來表格第三行的第二列 考慮到動態(tài)刪除又不影響整體html框架，又或者表格內(nèi)容很多的情況下，可以采用動態(tài)刪除添加的辦法

復(fù)制代碼 代碼如下:

<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>

刪除列

復(fù)制代碼 代碼如下:

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)文章

最新評論