internet-explorer - InnerHTML 不适用于 IE？

Question

我有一个问题，我有一个联系表格，它有一个下拉选择来选择联系人的主题，它在 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>

score 2 · Accepted Answer

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

score 0 · Accepted Answer

微软支持问题 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 被禁用，这具有兼容的额外好处（尽管它需要更多的用户直觉）。

score 0 · Accepted Answer

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

顺便说一句，我建议你使用 jquery：

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

变成了

$("#change").html(jobhtml); <--更好，不是吗？

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

score 0 · Accepted Answer

使用 jQuery 可以更简单地完成此操作。如果你对这个想法持开放态度。

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

jsFiddle 示例

internet-explorer - InnerHTML 不适用于 IE？

4 回答 4

Related

Reference