InnerHTML 不适用于 IE？答案

【问题标题】：InnerHTML is not working with IE?InnerHTML 不适用于 IE？
【发布时间】：2012-05-05 23:53:27
【问题描述】：

我有一个问题，我有一个联系表格，它有一个下拉选择来选择联系人的主题，它在 Firefox 上工作，但在 IE 上不工作......你能帮忙吗？

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>

【问题讨论】：

标签： internet-explorer select innerhtml

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用 jQuery 可以简单得多。如果你愿意接受这个想法。

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

jsFiddle Example

【讨论】：

【解决方案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 被禁用，这还有一个额外的好处是兼容（尽管它需要更多的用户直觉）。

【讨论】：

【解决方案4】：

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

顺便建议你使用jquery：

document.getElementById('change').innerHTML = jobhtml;

成为

$("#change").html(jobhtml);

ps：我认为jquery 使用innerHTML..所以不应该解决这个问题..

【讨论】：