jQuery ajax 动态append创建表格出现不兼容ie8
很多情况下，通过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和火狐下都可以正常显示了