【Javascript Trick系列】2、table相關操做

時間 2019-11-17

標籤 javascript trick 系列 table 相關欄目 JavaScript 简体版

原文原文鏈接

一個簡單而無聊的網頁，一片空白，以下：

<body>a page.<br></body>html

須要給它添加一點色彩，如增長如下內容到body裏面

<table><tr><td>boling</td></tr></table>web

這是簡單的問題，瞬間寫下代碼以下：

var table = document . createElement ( "TABLE" );

table . innerHTML = '<tr><td>boling</td></tr>' ;

document . body . appendChild ( table );

Ok,很是完美。但是問題真的解決了嗎？實際運行測試，

在執行 table.innerHTML = '<tr><td>boling</td></tr>' ; 這行代碼的時候，發現ie6-9是會報如下錯誤的：

"Invalid target element for this operation."

Ah ha！是時候找緣由了。

不用找了，微軟的問題從微軟找起，看這裏：

http://msdn.microsoft.com/en-us/library/ms533897(VS.85).aspx

有這麼一句話：

The innerHTML property is read-only on the col , colGroup , frameSet , html , head , style , table , tBody , tFoot , tHead , title , and tr objects.

終於真相大白了。對於ie6-9而言，這是隻讀屬性。那麼這個時候就得轉變思路，更換方式來處理了。

除了innerHTML外，天然就想到了appendChild方式了。天然快速寫下了如下代碼

var table = document . createElement ( "TABLE" );

var tr = document . createElement ( "TR" );

var td = document . createElement ( "TD" );

var text = document . createTextNode ( "boling" );

td . appendChild ( text );

tr . appendChild ( td );

table . appendChild ( tr );

document . body . appendChild ( table );

OK，這下子應該搞定了。再一試，發現ie6,7死活不顯示table，可是dom元素是已經插入到body下了。這又是怎麼回事？

一樣，微軟的問題微軟解決，參考下面的文章：

http://msdn.microsoft.com/en-us/library/ms532998%28VS.85%29.aspx#TOM%5FDOM

有如下內容：

Table Object Model vs. the DOM

The table object model contains methods specific to tables, such as insertRow and insertCell, whereas the DOM is more generic, because it can be applied to all elements. The generic DOM methods support the parent/child/sibling relationships in the document hierarchy with methods such as createElement and appendChild. The DOM is powerful in that it allows you to use script to manipulate any element of a document. For more information about the DOM, see the About the W3C Document Object Model.app

You can use the table object model to create and insert an element with a single call to the insertRow method. The DOM, however, requires two distinct steps: first, a call to createElement to create an empty tr element, and then a call to appendChild to insert the element into the document tree. These two steps are required for all elements, including the table itself.dom

Note Internet Explorer requires that you create a tBody element and insert it into the table when using the DOM. Since you are manipulating the document tree directly, Internet Explorer does not create the tBody, which is automatically implied when using HTML.

這下清晰了。原來table的操做有兩個概念，一個是TOM，即表格對象模型；另外一個是DOM對象操做。TOM的操做可使用表格對象模型的特定方法，而做爲DOM對象操做時，須要分兩個步驟，先使用createElement建立對象，包括table自己也是須要的，而後才能使用appendChild方法。上面咱們就是使用了DOM的方式來操做表格，而ie6，7須要在tBody下操做DOM方法，本來ie在默認狀況下會自動隱含了tBody在table裏面，但咱們上述的方法是動態建立的table，直接操縱了Document tree，因此不會自動隱含tBody，就必須手動增長了。

修改代碼以下：

var table = document.createElement("TABLE");

var tbody = document.createElement("TBODY");

var tr = document.createElement("TR");

var td = document.createElement("TD");

var text = document.createTextNode("boling");

td.appendChild(text);

tr.appendChild(td);

tbody.appendChild(tr)

table.appendChild(tbody);

document.body.appendChild(table);

這下子世界終於和諧了。