JavaScript实现将xml转换成html table表格的方法
本文实例讲述了JavaScript实现将xml转换成htmltable表格的方法。分享给大家供大家参考。具体如下：
functionConvertToTable(targetNode)
{
//ifthetargetNodeisxmlNodethislinemustberemoved
//icouldntfindawaytoparsexmlstringtoxmlnode
//soiparsexmlstringtoxmldocument
targetNode=targetNode.childNodes[0];
//firstweneedtocreateheaders
varcolumnCount=targetNode.childNodes[0].childNodes.length;
varrowCount=targetNode.childNodes.length
//nameforthetable
varmyTable=document.createElement("table");
myTable.border=1;
myTable.borderColor="green";
varfirstRow=myTable.insertRow();
varfirstCell=firstRow.insertCell();
firstCell.colSpan=columnCount;
firstCell.innerHTML=targetNode.nodeName;
//nameforthecolumns
varsecondRow=myTable.insertRow();
for(vari=0;i<columnCount;i++)
{
varnewCell=secondRow.insertCell();
newCell.innerHTML=targetNode.childNodes[0].childNodes[i].nodeName;
}
//nowfilltherowswithdata
for(vari2=0;i2<rowCount;i2++)
{
varnewRow=myTable.insertRow();
for(varj=0;j<columnCount;j++)
{
varnewCell=newRow.insertCell();
newCell.innerHTML=targetNode.childNodes[i2].childNodes[j].firstChild.nodeValue;
}
}
//iprefertosenditasstringinsteadofatableobject
returnmyTable.outerHTML;
}
下面是一个简单的示例用法：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UntitledPage</title>
</head>
<body>
<scripttype="text/javascript">
functionConvertToTable(targetNode)
{
//ifthetargetNodeisxmlNodethislinemustberemoved
//icouldntfindawaytoparsexmlstringtoxmlnode
//soiparsexmlstringtoxmldocument
targetNode=targetNode.childNodes[0];
//firstweneedtocreateheaders
varcolumnCount=targetNode.childNodes[0].childNodes.length;
varrowCount=targetNode.childNodes.length
//nameforthetable
varmyTable=document.createElement("table");
myTable.border=1;
myTable.borderColor="green";
varfirstRow=myTable.insertRow();
varfirstCell=firstRow.insertCell();
firstCell.colSpan=columnCount;
firstCell.innerHTML=targetNode.nodeName;
//nameforthecolumns
varsecondRow=myTable.insertRow();
for(vari=0;i<columnCount;i++)
{
varnewCell=secondRow.insertCell();
newCell.innerHTML=targetNode.childNodes[0].childNodes[i].nodeName;
}
//nowfilltherowswithdata
for(vari2=0;i2<rowCount;i2++)
{
varnewRow=myTable.insertRow();
for(varj=0;j<columnCount;j++)
{
varnewCell=newRow.insertCell();
newCell.innerHTML=targetNode.childNodes[i2].childNodes[j].firstChild.nodeValue;
}
}
//iprefertosenditasstringinsteadofatableobject
returnmyTable.outerHTML;
}
functionloadXmlDocFromString(text)
{
try//InternetExplorer
{
xmlDoc=newActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
returnxmlDoc;
}
catch(e)
{
try//Firefox,Mozilla,Opera,etc.
{
parser=newDOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
returnxmlDoc;
}
catch(e)
{
alert(e.message);
return;
}
}
}
varmyXml='<TableName>\
<firstRow>\
<field1>1</field1>\
<field2>2</field2>\
</firstRow>\
<firstRow>\
<field1>3</field1>\
<field2>4</field2>\
</firstRow>\
</TableName>';
varmyDoc=loadXmlDocFromString(myXml);
document.write(ConvertToTable(myDoc));
</script>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。