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应该不解决这个问题..