码迷,mamicode.com
首页 > 移动开发 > 详细

jQuery ajax 动态append创建表格出现不兼容ie8

时间:2017-05-02 14:58:26      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:body   data   兼容   情况   aos   ble   内容   func   key   

非常多情况下。通过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和火狐下都能够正常显示了


jQuery ajax 动态append创建表格出现不兼容ie8

标签:body   data   兼容   情况   aos   ble   内容   func   key   

原文地址:http://www.cnblogs.com/lxjshuju/p/6796083.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!