摘要:IE9 於 AJAX Update Table 時的 Bug
最近遇到一件很弔詭的 Bug, 我的狀況是在以 AJAX 做查詢, 組成 Table 時發生, 當資料量大時, 會出現突然多一格 Td 的問題.
例如:
曾試過 IE9 相容模式, FireFox 與 Chrome 都沒有這個問題, 唯獨 IE9, 本來以為我 HTML Tag 有誤, 上網一查才知道別人也有相同的問題, 原來是 IE9 的 Bug, <tr> 與 <td> 之間不得有空白或換行, 必須緊接著.
有問題的 HTML Tag:
<table>
<tr>
<td>11111</td>
<td>22222</td>
<td>33333</td>
</tr>
</table>
正確的HTML Tag:
<table>
<tr><td>11111</td><td>22222</td><td>33333</td></tr>
</table>
但這樣子寫整個 HTML Code 又很醜, 寫成一行雖能解決問題, 但在閱讀上會造成很大的困擾, 繼續在網路上搜尋...總算找到一種方式能不改變 HTML Code 排版, 也能正常的方式, 用jQuery吧!
例如:
<script type="text/javascript">
$(function () {
//### 'g': 代表比對所有字串
var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var replacement = $('#queryResultForm').html().replace(expr, '><');
$('#queryResultForm').html(replacement);
});
</script>
-
\t 水平 Tab
-
\r 歸位字元
-
\n 新行
-
\v 垂直 Tab
-
\f 換頁字元
用 Regular Expression 將 Table 裡的所有 Tag 緊貼, 就不會有問題啦! 收工.
相關連結
- [入門][Regex] Regular Expression 詳論
- Regular Expression (RegExp) in JavaScript
- IE9 table layout apparently affected by whitespace between HTML elements
- Internet Explorer 9 tables rendering casual problem
- IE9 adding empty table cells in large table
以上內容為個人一點見解, 請路過此地的前輩,
若文章內容有誤, 或者有不同的看法,
請盡量提出告訴我, 謝謝.
