innerHTML的问题

最新推荐文章于 2020-08-18 00:58:59 发布

alo76502

最新推荐文章于 2020-08-18 00:58:59 发布

阅读量152

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/wonder223/p/4519107.html

版权

目的就是给页面的一个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>");

转载于:https://www.cnblogs.com/wonder223/p/4519107.html