zoukankan      html  css  js  c++  java
  • 【Javascript Trick系列】二、table相关操作

    一个简单而无聊的网页,一片空白,如下:

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

    需要给它添加一点色彩,如增加以下内容到body里面

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

    这是简单的问题,瞬间写下代码如下:

     

    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! 是时候找原因了。
    不用找了, 微软的问题从微软找起,看这里:
    有这么一句话:
    The innerHTML property is read-only on the colcolGroupframeSethtmlheadstyletabletBodytFoottHeadtitle, 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下了。这又是怎么回事?
     
    同样,微软的问题微软解决,参考下面的文章:
    有以下内容:

    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.

    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.

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



    这下子世界终于和谐了。
  • 相关阅读:
    The Collections Module内建collections集合模块
    生成器接受和返还功能在执行过程中的详解以及生成器实现协同
    写python中的装饰器
    windows下载Mysql-python
    分别用单线程和多线程运行斐波那契、阶乘和累加和
    TCP客户端和服务器间传输数据遇到的TypeError: a bytes-like object is required, not 'str'问题
    python的property属性
    python的伪私有属性
    使用栈实现中缀表达式转为后缀表达式和后缀表达式的求解
    公众帐号如何向用户发送emoji表情(php版,附emoji编码表)
  • 原文地址:https://www.cnblogs.com/weiqian/p/3461722.html
Copyright © 2011-2022 走看看