标签:
目的就是给页面的一个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>");
标签:
原文地址:http://www.cnblogs.com/wonder223/p/4519107.html