AJAX编程技巧:在页面上中如何将受到的xml文件显示为表格的形式?
2016-07-01 11:44
302 查看
假如我们接收到了如下格式的文件,希望用表格的形式在页面上展示:
<entity>
<row>
<field name="id" value="1"/>
<field name="username" value="张三"/>
</row>
<row>
<field name="id" value="2"/>
<field name="username" value="李四"/>
</row>
</entity>
首先,在页面上定义好准备显示数据的表格,
<table id="resultstable" width="95%" border="1">
<tbody id="resultbody">
</tbody>
</table>
注意:tbody是必须的,否则就不能使用许多js表格方法。
在js中,使用下面的方法,就可以显示数据了:
function listAllData(){
var xmlDoc=xmlHttp.responseXML;
var rows=xmlDoc.getElementsByTagName("row");
var out="";
for(var i=0;i<rows.length;i++){
var field=rows[i].getElementsByTagName("field");
var row=document.createElement("tr");
for(var j=0;j<field.length;j++){
var cell=document.createElement("td");
var textNode=document.createTextNode(field[j].getAttribute("value"));
cell.appendChild(textNode);
row.appendChild(cell);
}
document.getElementById("resultbody").appendChild(row);
}
}
当然,还需要许多相关的方法,但都比较简单,就不一一介绍了。
<entity>
<row>
<field name="id" value="1"/>
<field name="username" value="张三"/>
</row>
<row>
<field name="id" value="2"/>
<field name="username" value="李四"/>
</row>
</entity>
首先,在页面上定义好准备显示数据的表格,
<table id="resultstable" width="95%" border="1">
<tbody id="resultbody">
</tbody>
</table>
注意:tbody是必须的,否则就不能使用许多js表格方法。
在js中,使用下面的方法,就可以显示数据了:
function listAllData(){
var xmlDoc=xmlHttp.responseXML;
var rows=xmlDoc.getElementsByTagName("row");
var out="";
for(var i=0;i<rows.length;i++){
var field=rows[i].getElementsByTagName("field");
var row=document.createElement("tr");
for(var j=0;j<field.length;j++){
var cell=document.createElement("td");
var textNode=document.createTextNode(field[j].getAttribute("value"));
cell.appendChild(textNode);
row.appendChild(cell);
}
document.getElementById("resultbody").appendChild(row);
}
}
当然,还需要许多相关的方法,但都比较简单,就不一一介绍了。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- JSP/PHP基于Ajax的分页功能实现
- javascript实现10进制转为N进制数
- 肯特·贝克:改变人生的代码整理魔法
- 你应该学习哪种编程语言?
- 开发阶段Jetty运行Jsp报错且响应空白
- 最后一次说说闭包
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 使用Ajax实现异步用户名验证
- 使用ajax实现用户登录验证(升级版)
- XML 与 JSON 优劣对比