作者cyril63 (陽光 海與沙灘)
看板Web_Design
標題Re: javascript的問題
時間Thu Jan 19 10:16:38 2006
嗯...找到解答了
順便跟版友們分享
首先...
innerHTML 這個property 使用在 table,thead,tbody,tr這幾個物件時
在IE的瀏覽器上 是 readonly 的..
亦即當你想改變innerHTML property時....IE會出現run time error
但聽說其他browser(Mozilla,firefox...)不會..不過我也沒試過
再來...
LPH66 大大所分享的方法..經過測試以後..的確不會出現runtime error
因為span 的innerHTML是可讀可寫的
但是塞到 span 物件裡的 html 如果包含table相關的物件(即上述的四種物件)
並無法順利顯示在畫面上...
最後...
經過上面兩種分析..似乎要使用innerHTML的方式塞入table物件..似乎相當困難
不過也是有漏洞可鑽...
關鍵是使用 behevior ...(不過這個我不懂所以都照抄)
先 create 一個檔(tmlinnerhtml.htc)如下
<public:component lightweight="true" name="innerHTMLTable"
urn="innerHTMLTable">
<public:property name="innerHTML" get="getInnerHTML"
put="setInnerHTML" id="innerHTML_ID"/>
</public:component>
<script>
function getInnerHTML()
{
var s = outerHTML.substr(outerHTML.indexOf(">")+1);
return s.substr(0,s.length - 8);
}
function setInnerHTML(value)
{
var oldInnerHTML = getInnerHTML();
if(value != oldInnerHTML)
{
outerHTML = outerHTML.substr(0,outerHTML.indexOf(">")+1)
+ value + "</table>";
innerHTML_ID.fireChange();
}
}
</script>
再來
在你的 html 裡 , css 宣告區塊裡面
加入
table
{
behavior:url(tblinnerhtml.htc);
}
這樣子的話 就可以在table物件裡任意讀寫innerHTML這個屬性了
並且可以正常顯示
※ 引述《LPH66 (運命のルーレット廻して)》之銘言:
: ※ 引述《cyril63 (陽光 海與沙灘)》之銘言:
: : 3. innerHTML無法使用在<table> , <thead> , <tbody> , <tr>物件
: 那你可以用一個<span></span>放在你要插入的位置
: 然後用innerHTML寫入
: ex:
: <table>
: <tr><td>some data already here</td><td>yet some data</td></tr>
: <span id="insert"></span>
: </table>
: 然後在javascript裡:
: document.getElementById("insert").innerHTML
: ='<tr><td>inserted some text in the table</td><td>yet another</td></tr>'
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 60.248.162.55
※ 編輯: cyril63 來自: 60.248.162.55 (01/19 10:18)
1F:推 cjoe:這一篇不錯,還可以教人家怎麼用innerHTML 01/19 12:26