js 將xml轉換為table表格簡單程式碼例項

antzone發表於2017-04-06
JSXML

下面分享一段程式碼例項，它實現了將xml檔案轉換為table表格格式的功能。

這裡不介紹它的實現過程，感興趣的朋友可以自己做一下分析。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
</head>
<body>
<script type="text/javascript">
function ConvertToTable(targetNode){
  // if the targetNode is xmlNode this line must be removed
  // i couldnt find a way to parse xml string to xml node
  // so i parse xml string to xml document
  targetNode = targetNode.childNodes[0];
  // first we need to create headers
  var columnCount = targetNode.childNodes[0].childNodes.length;
  var rowCount = targetNode.childNodes.length
  // name for the table
  var myTable = document.createElement("table");
  myTable.border = 1;
  myTable.borderColor ="green";
  var firstRow = myTable.insertRow();
  var firstCell = firstRow.insertCell();
  firstCell.colSpan = columnCount;
  firstCell.innerHTML = targetNode.nodeName;
  // name for the columns
  var secondRow = myTable.insertRow();
  for(var i=0;i<columnCount;i++){
    var newCell = secondRow.insertCell();
    newCell.innerHTML = targetNode.childNodes[0].childNodes[i].nodeName;
  }
  // now fill the rows with data
  for(var i2=0;i2<rowCount;i2++){
    var newRow = myTable.insertRow();
    for(var j=0;j<columnCount;j++){
      var newCell = newRow.insertCell();
      newCell.innerHTML = targetNode.childNodes[i2].childNodes[j].firstChild.nodeValue;
    }
  }
  //i prefer to send it as string instead of a table object
  return myTable.outerHTML;
}
function loadXmlDocFromString(text){
  //Internet Explorer
  try {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async="false";
    xmlDoc.loadXML(text);
    return xmlDoc;
  } 
  catch(e){
        // Firefox, Mozilla, Opera, etc.
    try{
      parser=new DOMParser();
      xmlDoc=parser.parseFromString(text,"text/xml");
      return xmlDoc;
    }
    catch(e){
      alert(e.message);
      return;
    }
  }
}
var myXml = '<TableName> \
  <firstRow> \
  <field1>1</field1> \
  <field2>2</field2> \
  </firstRow> \
  <firstRow> \
  <field1>3</field1> \
  <field2>4</field2> \
  </firstRow> \
 </TableName>';
 var myDoc = loadXmlDocFromString(myXml);
document.write( ConvertToTable(myDoc));
</script>
</body>
</html>

相關文章