码迷,mamicode.com
首页 > Web开发 > 详细

innerHTML的问题

时间:2015-05-21 12:27:45      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:

目的就是给页面的一个table进行多次赋值。

1)第一版的代码

 <table border="1" id="divData" >
        <tr>
           <th class="bglist-2">
             JO
           </th>
           <th class="bglist-2">
             信息
           </th>
           <th class="bglist-2">
             掃描時間
           </th>       
           <th class="bglist-2">
             掃描賬號
           </th>        
        </tr>       
    </table>
   
  for (i = 0; i < json.length; i++) {
            strTemp = strTemp + "<tr><td class=‘bglist-1‘>" 
               + json[i].JoNo + "</td><td class=‘bglist-1‘>" + json[i].Info
               + "</td><td class=‘bglist-1‘>" + json[i].CreateTime 
               + "</td><td class=‘bglist-1‘>" + json[i].Creater + "</td></tr>";
        }
        var x = document.getElementById("divData");
        for (i = x.childNodes.length - 1; i > 1; i--) {
            x.removeChild(x.childNodes[i])
        }
        x.innerHTML = x.innerHTML + strTemp;

 在IE10和Chrome下测试OK,User使用IE8,直接JS报错,晕到.

   查资料,发现有些人说innerHTML在IE8下面存在一些问题 

  2)第二版代码

<table border="1" >
        <tr>
           <th class="bglist-2">
             JO
           </th>
           <th class="bglist-2">
             信息
           </th>
           <th class="bglist-2">
             掃描時間
           </th>       
           <th class="bglist-2">
             掃描賬號
           </th>        
        </tr>
        <div id="divData"></div>       
    </table>
   
  for (i = 0; i < json.length; i++) {
            strTemp = strTemp + "<tr><td class=‘bglist-1‘>" 
               + json[i].JoNo + "</td><td class=‘bglist-1‘>" + json[i].Info
               + "</td><td class=‘bglist-1‘>" + json[i].CreateTime 
               + "</td><td class=‘bglist-1‘>" + json[i].Creater + "</td></tr>";
        }
        var x = document.getElementById("divData");
        x.innerHTML = x.innerHTML + strTemp;

  现在不报错了,但是页面错乱了,div会放在了table前面了,而且是没有格子的。

3)第三版代码

 <div id="divData">
    </div>

        var strTemp = " <table border=‘1‘><tr><th class=‘bglist-2‘>JO</th><th class=‘bglist-2‘>信息</th><th class=‘bglist-2‘> 掃描時間";
        strTemp = strTemp + "</th><th class=‘bglist-2‘>掃描賬號</th></tr>";
        for (var i = 0; i < json.length; i++) {
            strTemp = strTemp + "</tr><tr><td class=‘bglist-1‘>"
               + json[i].JoNo + "</td><td class=‘bglist-1‘>" + json[i].Info
               + "</td><td class=‘bglist-1‘>" + new Date(parseInt(json[i].CreateTime.replace("/Date(", "").replace(")/", ""), 10)).toLocaleString()
               + "</td><td class=‘bglist-1‘>" + json[i].Creater + "</td></tr><tr>";
        }
  var x = document.getElementById("divData");
 x.innerHTML =  strTemp+"</table>";

  整个世界清静了,大家都安分守己了,达到了要求

最终版本修改为Jquery版本,保证最大的兼容性。

$("#divData").html(strTemp + "</table>");

 

innerHTML的问题

标签:

原文地址:http://www.cnblogs.com/wonder223/p/4519107.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!