zoukankan      html  css  js  c++  java
  • innerHTML的问题

    目的就是给页面的一个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>");
    
  • 相关阅读:
    三、python函数基础
    二、python算法逻辑基础
    RE正则表达式-语法
    read方法读取ini文件报错'gbk' codec can't decode
    git bash常用命令
    xlrd、xlwt、xlutils模块操作excel文件
    Git命令行克隆项目
    浏览器console,web自动化常用的几种定位调试使用方法总结
    css定位正则匹配和模糊匹配
    罗马数字转整数
  • 原文地址:https://www.cnblogs.com/wonder223/p/4519107.html
Copyright © 2011-2022 走看看