InnerHTML與IE無法正常工作？

Question

我有一個問題，我有一個聯繫表格，它有一個下拉選擇選擇聯繫人的主題，它的工作在Firefox上，但不是在IE瀏覽器...你可以幫助PLZ，

JS部分：

<script type="text/javascript"> 
var jobhtml = "<td class='style1'>Job Reference:</td><td>&nbsp;</td><td><label><input type='text' name='job-reference' id='textfield4' /></label></td>"; 
var orderhtml = "<td class='style1'>Item Reference:</td><td>&nbsp;</td><td><label><input type='text' name='order-id' id='textfield4' /></label></td>"; 
function change() 
{ 
    switch (document.getElementById("select").value) 
    { 
     case "job": 
     document.getElementById('change').innerHTML = jobhtml; 
     break; 
     case "order": 
     document.getElementById("change").innerHTML = orderhtml; 
     break; 
     default: 
     document.getElementById("change").innerHTML=""; 
     break; 
    } 
} 
</script> 

HTML配件：

<tr> 
      <td><span class="style1">Subject</span></td> 
      <td>&nbsp;</td> 
      <td><label> 
      <select name="select" id="select" onchange="change();"> 
       <option>Please select</option> 
       <option>Meeting</option> 
       <option>Call</option> 
       <option value="order">Order</option> 
       <option value="job">Apply for a position</option> 
       <option>Testimonials</option> 
       <option>Complains</option> 
      </select> 
      </label></td> 
     </tr> 
      <tr id="change" name="change"> 

     </tr> 

Answer 1

這可能與jQuery做簡單得多。如果你接受這個想法。

$(document).ready(function(){ 
    $('#select').change(function(){ 
     switch($(this).val()){ 
      case "job": 
       $('#change').html(jobhtml); 
       break; 
      ...other cases... 
     } 
    }); 
}); 

jsFiddle Example

Answer 2

IE不支持innerHTML爲<tr>。像這樣做：

<tr> 
    <td><div id="change"></div></td> 
</tr> 

http://www.hotscripts.com/forums/javascript/46764-solved-innerhtml-tr-not-working-ie.html

Answer 3

Microsoft Support issue 239832

您不能在比其它細胞表元素設定innerHTML。

有很多更好的解決方案。我會做的是這樣的：

<table id="tbl"> 
    <thead> 
    <tr> 
     <td>Subject</td> 
     <td><select onChange="change(this.value);">...</select></td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Job Reference</td> 
     <td>............</td> 
    </tr> 
    </tbody> 
    <tbody> 
    <tr> 
     <td>Item Reference</td> 
     <td>............</td> 
    </tr> 
    </tbody> 
</table> 

<script type="text/javascript"> 
    (function() { 
    var tbl = document.getElementById('tbl'), 
     tbd = tbl.tBodies; 
    tbd[0].style.display = tbd[1].style.display = "none"; 
    window.change = function(val) { 
     tbd[0].style.display = val == "job" ? "" : "none"; 
     tbd[1].style.display = val == "order" ? "" : "none"; 
    }; 
    })(); 
</script> 

基本上劃分表分成不同的機構，然後顯示/隱藏他們根據所選擇的值。如果JavaScript被禁用，這還有額外的兼容性（儘管它需要更多的用戶直覺）。

Answer 4

似乎是一個已知的BUG： http://support.microsoft.com/kb/276228

通過我建議你使用jquery方式：

的document.getElementById（ '變'）的innerHTML = jobhtml;

成爲

$（ 「＃變」）HTML（jobhtml）。 < - 最好不要？

PS：我suppouse jQuery的使用innerHTML..so應該不解決這個問題..