問題:
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <script type="text/javascript"> function AddOrDelModel(modelId){ if(document.getElementById(modelId).checked){ var insertText = "<table><tr><td>"+modelId+"被選中</td></tr></table>"; document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML+insertText; }else { document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML.replace("<table><tbody><tr><td>"+modelId+"被選中</td></tr></tbody></table>",""); } } </script> </head> <body> <input id="Checkbox1" type="checkbox" onclick="AddOrDelModel('Checkbox1')" value="checkbox1" name="CheckBox1" /> <input id="Checkbox2" type="checkbox" onclick="AddOrDelModel('Checkbox2')" value="checkbox2" name="CheckBox2" /> <div id="insert"></div> </body>
要實現的功能選中checkbox1、checkbox2界面分別顯示添加checkbox1、checkbox2被選中,取消選擇則分別移除添加的內容.
使用firefox調試顯示在添加table的時候會自動多添加<tbody>標簽
現在在firefox和chrome運行沒有問題,但是其他的瀏覽器(ie、搜狗等瀏覽器)就不行了。
回答:
function AddOrDelModel(modelId){ var insertText = '<table tag=' + modelId + '><tr><td>' + modelId + '被選中</td></tr></table>', insertEl = document.getElementById("insert"); if(document.getElementById(modelId).checked){ insertEl.innerHTML = insertEl.innerHTML + insertText; }else{ var tables = insertEl.getElementsByTagName("table"); for(var i = 0; i < tables.length; i++){ if(tables[i].tag = modelId){ insertEl.removeChild(tables[i]); break; } } } }