我又來談 IE 的 bug 了，這次是關於 IE 處理動態產生之表格的問題。這事有段時間了，我看到 Thinker 在《jQuery 的使用 innerHTML 的問題》提到當他使用 jQuery 裡的 JavaScript library 產生頁面內容時碰到這問題 ，這才讓我想起來。這問題說來有趣，我之前是在 MSDN 裡找到答案，見《How to Build Tables Dynamically》。我看了 MSDN 的文章會想笑，又一個把 IE 的 bug 當技術文章的案例。
我又來談 IE 的 bug 了，這次是關於 IE 處理動態產生之表格的問題。這事有段時間了，我看到 Thinker 在《jQuery 的使用 innerHTML 的問題》提到當他使用 jQuery 裡的 JavaScript library 產生頁面內容時碰到這問題 ，這才讓我想起來。這問題說來有趣，我之前是在 MSDN 裡找到答案，見《How to Build Tables Dynamically》。我看了 MSDN 的文章會想笑，又一個把 IE 的 bug 當技術文章的案例。
在 IE (IE7沒試過) 中，它要求 table 的 DOM 結構中，一定且至少有一個 tbody 節點。 不論我們是用 DOM 方法建立的 table (document.createElement('table');) 或是用 HTML 標籤建立的 table ，即使我們都沒寫出 tbody ， IE 也會自己加一個上去。因此，當我們試圖操作 DOM 方法添加表格之行、列時，就必須添加在 tbody 節點之下才行。但如果用 IE 自帶的 Table Object Model 就沒這個限制。好笑啊。
我那時的解決方法很簡單。凡是用 HTML 標籤時，一律加一個 tbody 。只要有一個 tbody 存在， IE 就不會自己再多建一個，故此時各瀏覽器的 DOM 節點都一致。如果是用 DOM 方法建立的 table ，則一律加一個 tbody 節點。
下面的例子，用 HTML 標籤建立了兩個靜態表格內容，並定義了一個使用 DOM 方法建立表格節點的函數。
接著是一段 JavaScript 的測試程式。這段程式會顯示兩個靜態表格底下的 tbody 節點數。在 IE 中，會顯示兩個表格中都有 1 個 tbody 節點；其他瀏覽器則會顯示第一個靜態表格中沒有 tbody 節點。接著測試程式會建立兩個動態表格，同樣顯示其中的 tbody 節點數，最後一個動態表格會顯示出 IE 另一個與預期不一致的地方。
總結而言，要避免這問題只有從 tbody 下手，我們一律建立 tbody 節點，如此一來在不同瀏覽器環境中，都會有一致的 DOM 結構。接下來的動作就沒有差異了。
