【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);

这下子世界终于和谐了。