JavaScript实现将xml转换成html table表格的方法

更新时间：2026-08-08 14:41:28作者：zhao

本文实例讲述了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>

</firstRow>

</TableName>';

varmyDoc=loadXmlDocFromString(myXml);

document.write(ConvertToTable(myDoc));

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。