最近刚学js，写了个用js操作xml的小程序
大家多拍拍砖，指出可以改进的地方
operxml.html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
table,tr,td {
background-position: center;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
border-color: blue;
text-align: center;
font-size: 20px;
}
table {
width: 800px;
margin-bottom: 20px;
}
tr {
height: 40px;
}
.bordertyle {
font-family: sans-serif;
text-align: center;
}
.btn {
margin-left: 30px;
margin-right: 30px;
}
label {
font-size: 20px;
font-family: sans-serif;
}
</style>
<script language="javascript">
//***********js操作XML*************
//* author:luobin *
//* Email:luobin23628@163.com *
//*********************************
/*
function loadXML(xmlFile){
var xmlDoc;
if(!window.ActiveXObject){
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlFile,"text/xml");
}else{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load(xmlFile);
}
return xmlDoc;
}
*/
//针对两种浏览器，分别获取xmlDocument对象
function loadXML(xmlFile)
{
var xmlDoc;
if(window.ActiveXObject) {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(xmlFile);
}
else if(document.implementation&&document.implementation.createDocument){
xmlDoc=document.implementation.createDocument( "", "",null);
xmlDoc.async=false;
xmlDoc.load(xmlFile);
} else{
alert('Your browser cannot handle this script');
}
return xmlDoc;
}
var xmlDoc = loadXML("test.xml");
var members = xmlDoc.getElementsByTagName("member");
var maxRes = members.length;
var pageShow = 5;
var currentPage = 1;
var maxPage = Math.ceil(maxRes/pageShow);
//此方法只能在body标签中或后调用
function retrieve(){
var oDiv = document.createElement("div");
oDiv.id = "showhtml"
oDiv.className = "bordertyle";
if(maxRes){
var oTable = generateTable(oDiv,(currentPage-1)*pageShow,currentPage*pageShow);
var pageInf = document.createElement("div");
var oLabel = document.createElement("label");
oLabel.innerHTML = "共条"+maxRes+"记录,当前第";
pageInf.appendChild(oLabel);
var curLabel = document.createElement("label");
curLabel.innerHTML = currentPage;
curLabel.setAttribute("id","curLabel");
pageInf.appendChild(curLabel);
var oLabel3 = document.createElement("label");
oLabel3.innerHTML = "页,共"+maxPage+"页";
pageInf.appendChild(oLabel3);
oDiv.appendChild(pageInf);
var buttonSet = document.createElement("div")
buttonSet.className = "bordertyle";
var firstBtn = document.createElement("button");
firstBtn.innerHTML = "首页";
firstBtn.id = "firstBtn";
firstBtn.className = "btn";
firstBtn.onclick = function(){
goToPage(1,oTable,curLabel);
};
buttonSet.appendChild(firstBtn);
var preBtn = document.createElement("button");
preBtn.id = "preBtn";
preBtn.innerHTML = "前一页";
preBtn.className = "btn";
preBtn.onclick = function(){
if(currentPage>1){
goToPage(currentPage-1,oTable,curLabel);
}
};
buttonSet.appendChild(preBtn);
var tx = document.createElement("input");
tx.value = currentPage;
tx.id = "tx";
tx.size = "2";
buttonSet.appendChild(tx);
var goBtn = document.createElement("button");
goBtn.innerHTML = "GO";
goBtn.onclick = function(){
var txPage = parseInt(tx.value);
goToPage(txPage,oTable,curLabel);
}
buttonSet.appendChild(goBtn);
var nextBtn = document.createElement("button");
nextBtn.innerHTML = "下一页";
nextBtn.id = "nextBtn";
nextBtn.className = "btn";
nextBtn.onclick = function(){
if(currentPage<maxPage){
goToPage(currentPage+1,oTable,curLabel);
}
};
buttonSet.appendChild(nextBtn);
var lastBtn = document.createElement("button");
lastBtn.innerHTML = "末页";
lastBtn.id = "lastBtn";
lastBtn.className = "btn";
lastBtn.onclick = function(){
goToPage(maxPage,oTable,curLabel);
};
buttonSet.appendChild(lastBtn);
oDiv.appendChild(buttonSet);
}else{
oDiv.innerHTML = "无记录";
}
document.body.appendChild(oDiv);
alterButton();//先把oDiv加到body之后才可调用，害我犯了错误
}
function generateTable(oDiv,start,end){
var oTable = document.createElement("table");
generateTableHead(oTable);
generateTableContent(oTable,start,end);
oDiv.appendChild(oTable);
return oTable;
}
function generateTableHead(oTable){
var oTr = oTable.insertRow(-1);
var oTd = oTr.insertCell(-1);
oTd.innerHTML = "name";//ie支持innerText，ff支持textContent 这里就偷懒的写法，改成innerHTML
/**
if(oTd.innerText){
oTd.innerText = "name";
}else{
oTd.textContent = "name";
}
**/
var oTd2 = oTr.insertCell(-1);
oTd2.innerHTML = "loginname";
var oTd3 = oTr.insertCell(-1);
oTd3.innerHTML = "email";
}
function generateTableContent(oTable,start,end){
end = (end>maxRes)?maxRes:end;
for(var i=start;i<end;i++){
var oTr = oTable.insertRow(-1);//ff中insertRow必须加上参数，而ie默认为-1
oTr.id = members[i].getAttribute("id");
var oTd = oTr.insertCell(-1);
var oName = members[i].getElementsByTagName("name");
oTd.innerHTML = oName[0].firstChild.nodeValue;//刚开始用的oName[0].text,不兼容ff，现在统一替换成oName[0].firstChild.nodeValue
var oTd2 = oTr.insertCell(-1);
var oLoginName = members[i].getElementsByTagName("loginName");
oTd2.innerHTML = oLoginName[0].firstChild.nodeValue;
var oTd3 = oTr.insertCell(-1);
var oEmail = members[i].getElementsByTagName("email");
oTd3.innerHTML = oEmail[0].firstChild.nodeValue;
}
}
function removeTableContent(oTable){
if(oTable.rows.length>1){
for(var i=oTable.rows.length-1;i>=1;i--){
oTable.deleteRow(i);
}
}
}
function alterButton(){
preBtn.disabled = (currentPage<=1)?true:false;
nextBtn.disabled = (currentPage>=maxPage)?true:false;
firstBtn.disabled = (currentPage==1)?true:false;
lastBtn.disabled = (currentPage==maxPage)?true:false;
}
function goToPage(page,oTable){
//此处还要加个正则表达式校验page是数字，js的正则表达式还不会有待进一步学习
if(page<1){
window.alert("您输入的页数小于等于0,请输入一个0到"+maxPage+"的整数");
return;
}
if(page>maxPage){
window.alert("您输入的页数超过了最大页数,请输入一个0到"+maxPage+"的整数");
return;
}
removeTableContent(oTable);
currentPage = page;
var start = (currentPage-1)*pageShow;
var end = currentPage*pageShow;
tx.value = currentPage;
curLabel.innerHTML = currentPage;
generateTableContent(oTable,start,end);
alterButton();
}
</script>
<script type="text/javascript">
</script>
</HEAD>
<BODY>
<script type="text/javascript">
retrieve();
</script>
</BODY>
</HTML>
test.xml
<?xml version="1.0" encoding="GB2312"?>
<rautinee>
<member id='1'>
<name>海仔</name>
<loginName>rautinee</loginName>
<email>rautinee@btamail.net.cn</email></member>
<member id='2'>
<name>刚强</name>
<loginName>hehe</loginName>
<email>rautinee@chinamanagers.com</email></member>
<member id='3'>
<name>金华刚</name>
<loginName>nature_it</loginName>
<email>rautinee_sea@hotmail.com</email></member>
<member id='4'>
<name>的简强</name>
<loginName>tank</loginName>
<email>tank@163.com</email></member>
<member id='7'>
<name>合资</name>
<loginName>kaka</loginName>
<email>kaka@eyou.com</email></member>
<member id='6'>
<name>加个人</name>
<loginName>apple</loginName>
<email>apple@163.com</email></member>
<member id='8'>
<name>null</name>
<loginName>sunny</loginName>
<email>rautinee@eyou.com</email></member>
<member id='10'>
<name>宝贝</name>
<loginName>index</loginName>
<email>rautinee@21cn.com</email></member>
<member id='12'>
<name>login</name>
<loginName>login</loginName>
<email>webmaster@chinamanagers.com</email></member>
<member id='13'>
<name>jiang</name>
<loginName>123</loginName>
<email>japing@chianmanagers.com</email></member>
<member id='14'>
<name>world</name>
<loginName>world</loginName>
<email>rautinee@21cn.com</email></member>
<member id='15'>
<name>swallow</name>
<loginName>swallow</loginName>
<email>swallow@chinamanagers.com</email></member>
<member id='16'>
<name>魏格</name>
<loginName>hotmail</loginName>
<email>rautinee_sea@hotmail.com</email></member>
<member id='17'>
<name>wrong</name>
<loginName>wrong</loginName>
<email>wrong@chinamanagers.com</email></member>
<member id='18'>
<name>leah</name>
<loginName>leah</loginName>
<email>leah@chinamanagers.com</email></member>
<member id='19'>
<name>ttth</name>
<loginName>ttth</loginName>
<email>rautinee@21cn.com</email></member>
</rautinee>
分享到：
相关推荐
本文将详细介绍如何使用JavaScript读取XML文件以及如何获取文件中的特定内容。 #### JavaScript与XML交互基础 1. **创建XMLHttpRequest对象**： - 首先，需要创建一个`XMLHttpRequest`对象来发送HTTP请求。这个...
总的来说，通过JavaScript读取XML文件需要异步加载XML数据，然后使用DOM解析XML字符串。在实际项目中，还可以考虑使用jQuery、axios等库来简化XML处理。同时，理解XML和DOM的概念对于JavaScript开发者来说是非常重要...
通过以上分析可以看出，这段代码的主要功能是使用JavaScript读取XML文档，并将其中的数据转换成HTML格式展示在网页上。这种方式非常适合用于构建动态的、数据驱动的用户界面。需要注意的是，该示例代码仅适用于支持`...
结合以上步骤，一个简单的JavaScript读取XML文件的示例代码如下： ```html <!DOCTYPE html> <title>JavaScript读取XML示例 var xhr = new XMLHttpRequest(); xhr.open('GET', 'yourfile.xml', true); ...
### JavaScript读取XML文件的方法详解 #### 一、引言 在现代Web开发中，XML（可扩展标记语言）作为一种轻量级的数据交换格式，在早期的Web应用中扮演着重要的角色。JavaScript作为前端的主要编程语言之一，具备强大...
这个"JS读取XML例子(兼容IE和FF).rar"压缩包包含了一个示例，展示了如何在不依赖任何插件的情况下，使用JavaScript在Internet Explorer（IE）和Firefox（FF）等浏览器中读取XML文件。下面我们将详细探讨JavaScript...
总结来说，JavaScript读取XML的基本流程包括： 1. 创建或获取XML文档对象，例如通过`new ActiveXObject("Microsoft.XMLDOM")`（在旧版IE中）或`new DOMParser().parseFromString(xmlString, "text/xml")`（在现代...
在JavaScript中，读取XML...以上就是使用JavaScript读取XML文件并生成树形结构的基本步骤。实际应用中，可能还需要考虑错误处理、优化性能以及更复杂的树结构显示。了解这些基本原理后，你可以根据需求进行扩展和定制。
首先，让我们了解JavaScript读取XML的基本过程。在浏览器环境中，可以使用`XMLHttpRequest`对象或者`fetch` API来获取XML数据。这里我们可能使用`XMLHttpRequest`，因为它对旧版本浏览器有更好的兼容性。以下是一个...
以上就是通过JavaScript读取XML并生成随机数的基本流程。实际应用中可能需要处理更多细节，如错误检查、异常处理以及优化性能等。此外，现代Web开发通常更倾向于使用JSON而非XML，因为JSON更简洁且JavaScript原生...
### JavaScript读取XML文件知识点详解 #### 一、XML与JavaScript简介 - **XML (Extensible Markup Language)**：一种标记语言，类似于HTML，用于存储和传输数据。它被设计成具有自描述性，使得数据在不同系统间...
以上就是JavaScript读取XML文件的基本步骤。需要注意的是，由于同源策略的限制，JavaScript只能直接从同一源加载XML文件。如果XML文件位于其他域，可能需要服务器端的帮助，如使用CORS（跨源资源共享）配置允许跨域...
同时，这个示例还展示了如何利用JavaScript读取XML文件，以便获取和处理数据。最后，IFrame的使用展示了如何在当前页面中嵌入其他Web内容。这些技术都是现代网页开发中的基础，理解并掌握它们对于创建交互性强、功能...
本文将深入探讨如何使用JavaScript读取XML文件并生成一个树状视图，通常这种视图被称为DTREE（Data Tree）。DTree对于展示层次结构数据，如目录结构，非常有用，因为它提供了直观的操作界面。 首先，我们需要了解...
在给定的标题和描述中，我们涉及了几个关键的知识点：jQuery排序、表格行的上下移动、用户名验证以及使用JavaScript读取XML文档。下面将详细阐述这些技术及其应用。 首先，jQuery排序通常指的是对DOM元素进行排序，...
JavaScript读取XML文件内容的过程就是这样，这涉及到异步请求、XML解析以及DOM操作。这个过程对于Web开发者来说是必不可少的技能，特别是在处理需要与服务器交换数据的应用中。理解并熟练掌握这些技术，将有助于构建...
js 操作xml 文件 读取xml文件 js 操作xml 文件 读取xml文件
### JS读取XML知识点详解 #### 一、XML与JavaScript结合的重要性 XML（eXtensible Markup Language）是一种用于标记数据的语言，具有良好的结构化特性，适用于存储和传输数据。在Web开发中，XML常被用作数据交换...
标题与描述均提到了“js读取xml文件”，这表明文章的主题聚焦于如何利用JavaScript（JS）语言处理XML数据。XML（Extensible Markup Language，可扩展标记语言）是一种用于存储和传输数据的标准格式，而JavaScript则...
标题中提到的知识点为“JS读取XML文件数据并以table形式显示数据”，这涉及到几个重要的技术和概念。首先是JavaScript（简称JS），一种广泛用于网页设计和开发的脚本语言，它可以让网页具有动态交互功能。接下来是...