Javascript操作xml小小showcase:xml转换为table

Posted on 2006-02-15 22:58 BlueO2 阅读(926) 评论(0)  编辑  收藏 所属分类: AJAX
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript" type="text/javascript">
var xDoc;
// verify that browser supports XML features and load external .xml file
//
this method is from other people's :)
function verifySupport(xFile) {
    
if (document.implementation && document.implementation.createDocument) {
        
// this is the W3C DOM way, supported so far only in NN6+
        xDoc = document.implementation.createDocument("""theXdoc"null);
    }
 else if (typeof ActiveXObject != "undefined"{
        
// make sure real object is supported (sorry, IE5/Mac)
        if (document.getElementById("msxml").async) {
            xDoc 
= new ActiveXObject("Msxml.DOMDocument");
        }

    }

    
if (xDoc && typeof xDoc.load != "undefined"{
        
// load external file (from same domain)
        xDoc.load(xFile);
        
return true;
    }
 else {
        
var reply = confirm("This example requires a browser with XML support, " +
            
"such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");
        
if (reply) {
            history.back( );
        }

    }

    
return false;
}


function init(xFile) {
    
// confirm browser supports needed features and load .xml file
    if (verifySupport(xFile)) {
        drawTable('matchData');
    }

}

function drawTable(tbody) {
    
var tr, td, i, j, oneRecord;
    tbody 
= document.getElementById(tbody);
    
// node tree
    var data = xDoc.getElementsByTagName("Data")[0];
    
// for td class attributes
    var classes = ["ctr","","","","ctr"];
    
for (i = 0; i < data.childNodes.length; i++{
        
// use only 1st level element nodes to skip 1st level text nodes in NN
        if (data.childNodes[i].nodeType == 1{
            
// one final match record
            oneRecord = data.childNodes[i];
            tr 
= tbody.insertRow(tbody.rows.length);
            td 
= tr.insertCell(tr.cells.length);
            td.setAttribute(
"class",classes[tr.cells.length-1]);
            td.innerHTML 
= 
              oneRecord.getElementsByTagName(
"N001")[0].firstChild.nodeValue;
            td 
= tr.insertCell(tr.cells.length);
            td.setAttribute(
"class",classes[tr.cells.length-1]);
            td.innerHTML 
= 
               oneRecord.getElementsByTagName(
"N002")[0].firstChild.nodeValue;
            td 
= tr.insertCell(tr.cells.length);
            td.setAttribute(
"class",classes[tr.cells.length-1]);
            td.innerHTML 
= 
               oneRecord.getElementsByTagName(
"N003")[0].firstChild.nodeValue;
        }

    }

}

</script>
</HEAD>

<BODY onload="init('index.xml');">

<table id="cupFinals">
<thead>
<tr><th>NODE1</th>
    
<th>NODE2</th>
    
<th>NODE3</th>
</tr>
</thead>
<tbody id="matchData"></tbody>
</table>
<!-- Try to load Msxml.DOMDocument ActiveX to assist support verification -->
<object id="msxml" width="1" height="1" 
    classid
="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>
</BODY>
</HTML>
XML file:
<?xml version="1.0" encoding="gb2312"?>
<Datas>
    
<Data>
<!--大循环的名称-->
        
<Title>
            
<N001>去掉HTML的第一段文字</N001>
            
<N002>去掉HTML的第二段文字</N002>
            
<N003>去掉HTML的第三段文字</N003>
        
</Title>
        
<Title>
            
<N001>去掉HTML的第一段文字</N001> 
            
<N002>去掉HTML的第二段文字</N002>
            
<N003>去掉HTML的第三段文字</N003>
        
</Title>
    
</Data>
</Datas>

只有注册用户登录后才能发表评论。


网站导航:
 

posts - 29, comments - 3, trackbacks - 0, articles - 0

Copyright © BlueO2