jQuery ajax 动态append创建表格出现不兼容ie8
Posted lxjshuju
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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和火狐下都能够正常显示了