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和火狐下都可以正常显示了

jQuery ajax 动态append创建表格出现不兼容ie8,布布扣,bubuko.com

时间: 2024-10-13 19:45:57

jQuery ajax 动态append创建表格出现不兼容ie8的相关文章

解决jQuery ajax动态新增节点无法触发点击事件的问题

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: 1 <ul id="demo"> 2 <li c

Jquery利用JSON数组创建表格

$(function () { var json = [ { "name": "张三", "age": "20", "gender": "男" }, { "name": "李四", "age": "21", "gender": "女" }, { "name&q

JSTL根据后台传输list大小动态创建表格

最近,项目中需要写一个根据后台传入List类型对象的大小来动态创建表格,并在JSP页面中将信息显示出来,并且对于一些特殊信息颜色飘红表示. 首先看一下List对象存储的内容,这个项目需要检测系统中一些服务器的连接情况,每个应用可能关联多个服务器,服务器的数量不同,所以使用List来存储信息,List中的对象是一个长度为2的String数组.这个String数组的第一个位置存放需要检测服务器的ip:port,第二个位置存放是检测结果,结果又两种,连接成功!和连接失败! 例如下面一个String数组

第84天:jQuery动态创建表格

jQuery动态创建表格 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动态创建表格</title> 6 <script src="jquery-1.11.1.js"></script> 7 <style> 8 table {

jquery动态创建表格

html代码 <input name="myname" id="myinput" onfocus="showMydiv('testname','sex','addr');"> <div id="mydiv" style="display:none;height:200px;width:196px;position:absolute;z-index:100;left:83px;top:40px;&qu

ajax动态生成表格

<script> var data = [{ name: "传智播客", url: "http://www.itcast.cn", type: "IT最强培训机构" },{ name: "黑马程序员", url: "http://www.itheima.com", type: "大学生IT培训机构" },{ name: "传智前端学院", url: &qu

JQuery根据Json创建表格

$(function () { var getjson = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com.cn", "腾讯": "http://www.qq.com" }; $('#btn').click(function () { var tbobj = $('<table border="1&qu

用Jquery动态append方式加入标签时Css样式丢失的解决方法

一般在Jquery中会用下面的方式来添加新标签: var obj = "<fieldset data-role='controlgroup' data-type='vertical' data-role='fieldcontain'> <input id='menu0" type='checkbox'/><label for='menu0'> 复选框 </label> </fieldset>";  //按个人要求拼接

javascript动态创建表格:新增、删除行和列

转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1.inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加