谷歌瀏覽器 insertCell與appendChild的區(qū)別
更新時(shí)間：2009年02月12日 20:22:56 作者：
table中增加單元格時(shí)
在谷歌瀏覽器中使用insertCell方法增加列時(shí)，顯示結(jié)果的先后順序與程序執(zhí)行的先后順序相反
而使用appendChild方法增加列，顯示結(jié)果的先后順序與程序執(zhí)行的先后順序相同
詳細(xì)可以執(zhí)行以下代碼：
<html>
<script type="text/javascript"><!--
function generatable(){
var tableObje = document.getElementById("info");
var bodyObj = tableObje.tBodies[0];
var rowObj = bodyObj.insertRow();
var cellObj = rowObj.insertCell();
cellObj.innerHTML = "張三";
cellObj = rowObj.insertCell();
cellObj.innerHTML = "請(qǐng)參閱我編寫(xiě)的其他書(shū)目對(duì)應(yīng)的腳本特性為請(qǐng)參閱我編寫(xiě)的其他書(shū)目";
cellObj = rowObj.insertCell();
cellObj.innerHTML = "當(dāng)事人地址信息請(qǐng)小房間也是查看。";
}
function generatable1(){
var tableObje = document.getElementById("info");
var bodyObj = tableObje.tBodies[0];
var rowObj = document.createElement("tr");
var cellObj = document.createElement("td");
cellObj.innerHTML = "張三";
rowObj.appendChild(cellObj)
cellObj = document.createElement("td");
cellObj.innerHTML = "請(qǐng)參閱我編寫(xiě)的其他書(shū)目對(duì)應(yīng)的腳本特性為請(qǐng)參閱我編寫(xiě)的其他書(shū)目";
rowObj.appendChild(cellObj);
cellObj = document.createElement("td");
cellObj.innerHTML = "當(dāng)事人地址信息請(qǐng)小房間也是查看。";
rowObj.appendChild(cellObj);
bodyObj.appendChild(rowObj);
}
// --></script>
<body onload="generatable()">
<table width=100 bgcolor=#f3f3f3 id=info border=1 style="table-layout:fixed;" style="table-layout:fixed;">
<thead>
<tr>
<td style="width:80">姓名</td>
<td style="width:200">描述</td>
<td style="width:100">地址</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
詳細(xì)可以執(zhí)行以下代碼：
復(fù)制代碼 代碼如下:
<html>
<script type="text/javascript"><!--
function generatable(){
var tableObje = document.getElementById("info");
var bodyObj = tableObje.tBodies[0];
var rowObj = bodyObj.insertRow();
var cellObj = rowObj.insertCell();
cellObj.innerHTML = "張三";
cellObj = rowObj.insertCell();
cellObj.innerHTML = "請(qǐng)參閱我編寫(xiě)的其他書(shū)目對(duì)應(yīng)的腳本特性為請(qǐng)參閱我編寫(xiě)的其他書(shū)目";
cellObj = rowObj.insertCell();
cellObj.innerHTML = "當(dāng)事人地址信息請(qǐng)小房間也是查看。";
}
function generatable1(){
var tableObje = document.getElementById("info");
var bodyObj = tableObje.tBodies[0];
var rowObj = document.createElement("tr");
var cellObj = document.createElement("td");
cellObj.innerHTML = "張三";
rowObj.appendChild(cellObj)
cellObj = document.createElement("td");
cellObj.innerHTML = "請(qǐng)參閱我編寫(xiě)的其他書(shū)目對(duì)應(yīng)的腳本特性為請(qǐng)參閱我編寫(xiě)的其他書(shū)目";
rowObj.appendChild(cellObj);
cellObj = document.createElement("td");
cellObj.innerHTML = "當(dāng)事人地址信息請(qǐng)小房間也是查看。";
rowObj.appendChild(cellObj);
bodyObj.appendChild(rowObj);
}
// --></script>
<body onload="generatable()">
<table width=100 bgcolor=#f3f3f3 id=info border=1 style="table-layout:fixed;" style="table-layout:fixed;">
<thead>
<tr>
<td style="width:80">姓名</td>
<td style="width:200">描述</td>
<td style="width:100">地址</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了js設(shè)置文字顏色的方法,涉及JS頁(yè)面元素樣式操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12
在多個(gè)頁(yè)面使用同一個(gè)HTML片段《續(xù)》
上一篇文章中我們使用textarea來(lái)模擬AJAX的返回結(jié)果，造成了一些誤解。 這里我們首先用asp.net的Generic Handler做一個(gè)簡(jiǎn)單的后臺(tái)來(lái)重現(xiàn)這個(gè)AJAX過(guò)程。2011-03-03
前端的小伙伴大概都知道，js中的var變量存在變量提升，在es6以后隨著let變量的出現(xiàn)，變量提升問(wèn)題得以解決，那么變量提升的原理是什么，es6又是怎么解決變量提升問(wèn)題的，下面我們來(lái)共同探尋答案2023-05-05
詳解JavaScript如何實(shí)現(xiàn)四種常用排序
這篇文章主要為大家介紹了如何利用JavaScript實(shí)現(xiàn)四個(gè)常用的排序：插入排序、交換排序、選擇排序和歸并排序，文中利用動(dòng)圖詳細(xì)介紹了實(shí)現(xiàn)過(guò)程，需要的可以參考一下2022-02-02
javascript類(lèi)型系統(tǒng) Window對(duì)象學(xué)習(xí)筆記
這篇文章主要介紹了javascript類(lèi)型系統(tǒng)之Window對(duì)象，整理關(guān)于Window對(duì)象的學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-01-01
javascript中檢測(cè)變量的類(lèi)型的代碼
javascript對(duì)于變量的定義、類(lèi)型的要求都比較松散，這樣既方便，但又容易犯錯(cuò)。有時(shí)候進(jìn)行必要的類(lèi)型檢查是必須的。2010-12-12
詳解如何通過(guò)JavaScript實(shí)現(xiàn)函數(shù)重載
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)JavaScript實(shí)現(xiàn)函數(shù)重載，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，感興趣的可以了解一下
2023-01-01 
Jquery把獲取到的input值轉(zhuǎn)換成json
本篇文章主要介紹了Jquery把獲取到的input值轉(zhuǎn)換成json的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-05-05 
這篇文章主要介紹了簡(jiǎn)單的JavaScript互斥鎖的相關(guān)資料,需要的朋友可以參考下
2014-02-02