非常多情况下。通过js(jQuery1.10)动态来创建一些样式,对页面的动态交互来说是非常方便的
可是不同的浏览器针对动态生成的不是非常兼容,在此遇见的不兼容ie8。跟各位分享下
代码:
json数据
data.json
[{"name":"ajax","job":"manong"},{"name":"js","job":"diaosi"}]
html页面
<table class="ajaxappend">
<thead></thead>
<tbody></tbody>
</table>
js文件
$document.ready(function(){
.ajax(function(){
type:"post",
url:"data.json",
success:function(data){
$(".ajaxappend tbody").append("<tr>");
$(".ajaxappend thead").append("<th>name</th>");
$(".ajaxappend thead").append("<th>job</th>");
$(".ajaxappend tbody").append("</tr>");
for(int i = 0,l = data.length; i < l; i = i+1){
$(".ajaxappend tbody").append("<tr>");
for(var key in data[i]){
$(".ajaxappend tbody").append("<td>"+data[i][key]+"</td>");
}
$(".ajaxappend tbody").append("</tr>");
}
}
});
});
上面的效果在火狐下是可以正常动态生成出表格的
可是在ie8却不行,经过几次验证。猜測,ie对动态append的内容有要求,须要将一个具有完整意义的html一起append到代码中
改动例如以下
$document.ready(function(){
.ajax(function(){
type:"post",
url:"data.json",
success:function(data){
var head="";
var body ="";
head = head + "<tr><th>name</th><th>job</th></tr>";
for(int i = 0,l = data.length; i < l; i = i+1){
body = body + “<tr>";
for(var key in data[i]){
body = body + "<td>"+data[i][key]+"</td>";
}
body = body + "</tr>";
}
· $(".ajaxappend tbody").append(body);
}
});
});
这样ie8和火狐下都能够正常显示了