作者 主題: FF2.0.x 用 JS 建立 <table> 的 borderCollapse 不能正常顯示  (閱讀 4610 次)

0 會員 與 1 訪客 正在閱讀本文。

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
測試碼如下:

代碼: [選擇]
<html>
<body>
  <table border="1" cellpadding="0" cellspacing="0"
    style="border-collapse: collapse" bordercolor="#60ff60" width="100" height="100">
    <tr><td width="100%" align="center" valign="middle">123</td></tr>
  </table><br>
<script>
  var tbl001 = document.createElement('TABLE');
  document.body.appendChild(tbl001);
  tbl001.border = 1;
  tbl001.width = 100;
  tbl001.height = 100;
  tbl001.cellPadding = 0;
  tbl001.cellSpacing = 0;
  tbl001.style.borderCollapse = 'collapse';
  tbl001.borderColor = '#60ff60';
 
  var r001 = tbl001.insertRow(-1);
  var cell001 = r001.insertCell(-1);
  cell001.vAlign = 'middle';
  cell001.align='center';
  cell001.innerHTML = '123';
</script>
</body>
</html>

上面是用TAG建立<TABLE>, 下面則是用 JS 建立同樣的東西

在 IE(6) 上下兩個 TABLE 顯示是一樣的, 都有一個寬度1的綠框

但是在 FF2.0.x 只有上面的正常, 下面那個只能顯示寬度1的黑框

為什麼無法在  FF2.0.x JS 裡指定邊框的顏色 ???

爬過估狗, 雖然有一些解法, 但是我試過還是無效啊  :'(

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
改一下
var div  = document.createElement('div');
div.innerHTML='<table>........................';
document.body.appendChild(div);
這樣會比較簡單

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
改一下
var div  = document.createElement('div');
div.innerHTML='<table>........................';
document.body.appendChild(div);
這樣會比較簡單

嗯嗯... 我原來就是這樣用的, 只是要建立的項目有點多

之前有討論過, 說是用 innerHTML 速度會比較慢啊~~

所以就改用 createElement('TABLE') 的方式來跑 XD

如果真的無解的話, 那也只好改回用 innerHTML 了 orz...

3Q ^____^

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
其實也不是不行...但你要這樣用
http://www.w3schools.com/htmldom/dom_obj_style.asp
tbl001.style.border
http://www.w3schools.com/htmldom/prop_style_border.asp
如果有問題可以查w3schools 的網站....基本上那的語法都是跨broswer的(個人經驗)....
更好的是通常有demo的可以試試看能不能用
如果不好找就用
http://www.gotapi.com/jsdomw3s
可以直接找 css 跟  javascript dom
« 上次編輯: 2008-07-04 09:49 由 micmic3 »

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
ok, 多謝您的資訊, 我再試試, 結果如何再上來報告 ^^

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
參考m大提供的資料, 終於可以讓 ie, ff 顯示結果都一樣了  ;D

上面的 js 改了一些...

引用
<script>
  var tbl001 = document.createElement('TABLE');
  document.body.appendChild(tbl001);
  tbl001.width = 100;
  tbl001.height = 100;
  tbl001.cellPadding = 0;
  tbl001.cellSpacing = 0;
  tbl001.style.border = ((document.all) ? '1' : 'thin') + " solid #60ff60";
  var r001 = tbl001.insertRow(-1);
  var cell001 = r001.insertCell(-1);
  cell001.vAlign = 'middle';
  cell001.align='center';
  cell001.innerHTML = '123';
</script>

在 ie 用 thin 顯示的框還是很粗 = =

不過 ie 可以接受數字指定寬度, 在 ff 卻又不接受數字指定寬度

所以只好加個判斷 ^^

另外原來的 tbl001.border = 1 這行就不要了.

再次感謝 m(_ _)m

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料

  tbl001.style.border = ((document.all) ? '1' : 'thin') + " solid #60ff60";
 
tbl001.style.border ='1px solid #60ff60';
這樣就可以了吧...可以不用 thin 直接指定 px

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
嗯嗯, 的確是, 加個 px 就好了, 連判斷也都免了 ^^

再次拜謝 <(_ _)>