论坛首页 Web前端技术论坛

javascript动态操作表格

浏览 7815 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (6) :: 隐藏帖 (6)
作者 正文
   发表时间:2010-04-12   最后修改:2010-04-12
比如说我们在发送ajax后返回的JSON格式的字符串,那么我们要把这些数据放入HTML应该怎么办呢?
在现在的页面布局中,table的使用很少了,但是在展现列表等数据的时候还是会使用table,原因只因为table比div更方便,所以用JS操作table也是经常使用的,好了,还是看代码,
ajax发送过程就不写了,这里的是ajax的onreadystatechange调用函数
假设我们这里的data = [{"username":"张三","age":"25"},{"username":"李四","age":"30"}]
function show(){
	var data = ajax.responseText;//返回数据---JSON格式字符串
	data = data.replace(/^\s*/, "").replace(/\s*$/, "");//取出返回数据里面多余的空值
	data = eval('('+data+')'); //将JSON格式字符串转换为JSON对象
           var tab = document.getElementById("table_id");//获取页面的table
           for(var i=0;i<data.length;i++){
                    var newLine = tab.insertRow();//添加一行
                       var newCell1 = newLine.insertCell();
                    var newCell2 = newLine.insertCell();
                    newCell1.innerHTML=data[i].username;
                    newCell2.innerHTML=data[i].age;
         }
}

好了现在我们的数据就展现在前端HTML页面了!
这一次写的有点差,多多见谅,这是想把我的学习内容分享给大家, 最近项目里面的ajax用的很多,所以基本上都是写的这方面的内容。
   发表时间:2010-04-12  
确实,很基础~~~,但我也正适合我!
0 请登录后投票
   发表时间:2010-04-13  
yescpu 写道
确实,很基础~~~,但我也正适合我!

呵呵。可以多交流交流,昨天认识了一位这方面的高手!
0 请登录后投票
   发表时间:2010-04-13  
见图见真相
0 请登录后投票
   发表时间:2010-04-13  
这个 就是 我第一个项目用的
0 请登录后投票
   发表时间:2010-04-13  
data = eval('('+data+')');
ff好像不支持吧
0 请登录后投票
   发表时间:2010-04-13  
非常简洁啊
0 请登录后投票
   发表时间:2010-04-14  
数据量比较大的情况下,是不是先createDocumentFragment好一点?
0 请登录后投票
   发表时间:2010-04-14  
据说,数据量大的时候用innerHTML速度快
0 请登录后投票
   发表时间:2010-04-14  
20055294 写道
这个 就是 我第一个项目用的

呵呵。也是我第一个正式项目用的,
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics