阅读XML和解析到HTML

-1

我想读取一个XML并将其内容打印到屏幕上。表格正确显示，但我无法弄清楚为什么每个数据行都没有正确填充。阅读XML和解析到HTML

HTML：

<html> 
    <head> 
    <meta name="generator" 
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> 
    <script type="text/javascript" src="cv.js"></script> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" /> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" /> 
    <link href="//netdna.bootstrapcdn.com/bootswatch/2.3.2/simplex/bootstrap.min.css" /> 
    <title>CV</title> 
    </head> 
    <body> 
    <div id="menu" class="navbar navbar-fluid-top"> 
     <div class="navbar-inner"> 
     <ul class="nav"> 
      <li> 
      <button class="btn btn-large" onclick="getEducation()">Education</button> 
      </li> 
      <li> 
      <button class="btn btn-large" onclick="getEmployment()">Employment</button> 
      </li> 
      <li> 
      <button class="btn btn-large" onclick="getPublications()">Publications</button> 
      </li> 
      <li> 
      <button class="btn btn-large" onclick="getProjects()">Projects</button> 
      </li> 
     </ul> 
     </div> 
    </div> 
    <br /> 
    <br /> 
    <br /> 
    <div id="header" class="row" style="text-align:center;"> 
     <h1>Curriculum Vitae</h1> 
     <br/> 
     <h2>Assignment 4-1</h2> 
     <br/> 
     <h3 class="text-success bold">Bradley Woods</h3> 
    </div> 

    <div id="container" class="container-fluid"> 

    </div> 
    </body> 
</html>

的Javascript

var xmlDoc 
function getEducation() 
{ 
    document.getElementById("container").innerHTML='<h3>Education</h3> <br/>'; 
    document.getElementById("container").innerHTML+='<table class="table table-striped"> <th>Name</th><th>Institution</th> <th>Address</th> <th>Year</th><th>Major</th><th>Minor</th>' 
    var xmlObj = xmlDoc.documentElement; 
    var edus = xmlDoc.getElementsByTagName("DEGREE"); 


    var xmlhttp; 
    xmlhttp = new XMLHttpRequest(); 
    xmlhttp.open("GET", "cv.xml", false); 
    var vitae = xmlhttp.responseXML; 

    var edu = vitae.getElementsByTagName("DEGREE"); 
    for (i=0; i < edu.length; i++) 
    { 
    document.getElementById("container").innerHTML+='<tr>'; 
    document.getElementById("container").innerHTML+='<td> <h4>' + edu[i].getElementsByTagName("NAME")[0].childNodes[0].NodeValue + '/<h4></td>'; 
    document.getElementById("container").innerHTML+='<td> <h4>' + edu[i].getElementsByTagName("INSTITUTION")[0].childNodes[0].NodeValue + '/<h4></td>'; 
    document.getElementById("container").innerHTML+='<td> <h4>' + edu[i].getElementsByTagName("ADDRESS")[0].childNodes[0].NodeValue + '/<h4></td>'; 
    document.getElementById("container").innerHTML+='<td> <h4>' + edu[i].getElementsByTagName("YEAR")[0].childNodes[0].NodeValue + '/<h4></td>'; 
    document.getElementById("container").innerHTML+='<td> <h4>' + edu[i].getElementsByTagName("MAJOR")[0].childNodes[0].NodeValue + '/<h4></td>'; 
    document.getElementById("container").innerHTML+='<td> <h4>' + edu[i].getElementsByTagName("MINOR")[0].childNodes[0].NodeValue + '/<h4></td>'; 
    } 
    document.getElementById("container").innerHTML+='</table>' 

} 





function getEmployment() { 
document.getElementById("container").innerHTML="<h3>Employment</h3>"; 
document.getElementById("container").innerHTML+='<table class="table table-striped"> <th>Name</th><th>Address</th> <th>Title</th> <th>Begin</th><th>End</th><th>Responsibilities</th>' 
document.getElementById("container").innerHTML+='</table>' 


} 

function getPublications() 
{ 
document.getElementById("container").innerHTML="<h3>Publications</h3>"; 
document.getElementById("container").innerHTML+='<table class="table table-striped"> <th>Title</th><th>Author(s)</th> <th>Name</th> <th>Year</th><th>Begin Page</th><th>End Page</th><th>Volue</th><th>Volume Number</th>' 
document.getElementById("container").innerHTML+='</table>' 
} 


function getProjects() 
{ 
document.getElementById("container").innerHTML="<h3>Projects</h3>"; 
document.getElementById("container").innerHTML+='<table class="table table-striped"> <th>Title</th><th>Name</th> <th>Amount</th> <th>Begin</th><th>End</th><th>Role</th>' 
document.getElementById("container").innerHTML+='</table>' 
}

XML

<?xml version="1.0"?><!DOCTYPE VITAE SYSTEM "vitae.dtd"> 
<VITAE> 
    <DEGREE> 
     <NAME>Bachelors Computer Science</NAME> 
     <INSTITUTION>Franklin University</INSTITUTION> 
     <ADDRESS>201 S Grant Ave, Columbus, OH 43215</ADDRESS> 
     <YEAR>2013</YEAR> 
     <MAJOR>Computer Science</MAJOR> 
     <MINOR>Software design</MINOR> 
    </DEGREE> 
    <DEGREE> 
     <NAME>Master's Computer Science</NAME> 
     <INSTITUTION>Franklin University</INSTITUTION> 
     <ADDRESS>201 S Grant Ave, Columbus, OH 43215</ADDRESS> 
     <YEAR>2014</YEAR> 
     <MAJOR>Computer Science</MAJOR> 
     <MINOR>Aritificial Intelligence</MINOR> 
    </DEGREE> 
    <DEGREE> 
     <NAME>PHD Computer Science</NAME> 
     <INSTITUTION>Franklin University</INSTITUTION> 
     <ADDRESS>201 S Grant Ave, Columbus, OH 43215</ADDRESS> 
     <YEAR>2015</YEAR> 
     <MAJOR>Computer Science</MAJOR> 
     <MINOR>Game Theory</MINOR> 
    </DEGREE> 
    <EMPLOYMENT> 
     <NAME>IBM</NAME> 
     <ADDRESS>8235 Estates Parkway Plain City, OH 43064</ADDRESS> 
     <TITLE>Software Developer</TITLE> 
     <BEGIN>01/01/2012</BEGIN> 
     <END>12/31/2012</END> 
     <RESPONSIBILITIES>Unit Testing</RESPONSIBILITIES> 
    </EMPLOYMENT> 
    <EMPLOYMENT> 
     <NAME>Microsoft</NAME> 
     <ADDRESS>One Microsoft Way Redmond, WA 98052-6399</ADDRESS> 
     <TITLE>Software Developer</TITLE> 
     <BEGIN>01/01/2013</BEGIN> 
     <END>12/31/2013</END> 
     <RESPONSIBILITIES>OS Developer</RESPONSIBILITIES> 
    </EMPLOYMENT> 
    <EMPLOYMENT> 
     <NAME>Twitter</NAME> 
     <ADDRESS>1355 Market St, Suite 900 San Francisco, CA 94103</ADDRESS> 
     <TITLE>Software Developer</TITLE> 
     <BEGIN>01/01/2010</BEGIN> 
     <END>12/31/2010</END> 
     <RESPONSIBILITIES>Twitter Search Developer</RESPONSIBILITIES> 
    </EMPLOYMENT> 
    <EMPLOYMENT> 
     <NAME>Yahoo Inc</NAME> 
     <ADDRESS> 701 1st Ave, Sunnyvale, CA 94089</ADDRESS> 
     <TITLE>Software Developer</TITLE> 
     <BEGIN>01/01/2011</BEGIN> 
     <END>12/13/2011</END> 
     <RESPONSIBILITIES>Develop Gaming Apps</RESPONSIBILITIES> 
    </EMPLOYMENT> 
    <EMPLOYMENT> 
     <NAME>ESPN</NAME> 
     <ADDRESS> 545 Middle St, Bristol, CT 06010</ADDRESS> 
     <TITLE>Software Developer</TITLE> 
     <BEGIN>01/01/2010</BEGIN> 
     <END>12/13/2010</END> 
     <RESPONSIBILITIES>Develop Gaming Apps</RESPONSIBILITIES> 
    </EMPLOYMENT> 
    <PUBLICATION> 
     <AUTHOR>Bradley Woods</AUTHOR> 
     <AUTHOR>Bill Gates</AUTHOR> 
     <TITLE>Designing A Data Warehouse </TITLE> 
     <NAME>Developer Times</NAME> 
     <YEAR>2010</YEAR> 
     <BEGIN>122</BEGIN> 
     <END>125</END> 
     <VOLUME>8</VOLUME> 
     <VOLNUMBER>5</VOLNUMBER> 
    </PUBLICATION> 
    <PUBLICATION> 
     <AUTHOR>Bradley Woods</AUTHOR> 
     <AUTHOR>Tony Soprano </AUTHOR> 
     <TITLE>Pragmatic Software Development</TITLE> 
     <NAME>Developer Times </NAME> 
     <YEAR>2011</YEAR> 
     <BEGIN>35</BEGIN> 
     <END>45</END> 
     <VOLUME>14</VOLUME> 
     <VOLNUMBER>9</VOLNUMBER> 
    </PUBLICATION> 
    <PUBLICATION> 
     <AUTHOR>Bradley Woods</AUTHOR> 
     <TITLE>Starting A Career in Software Development</TITLE> 
     <NAME>Developer Times </NAME> 
     <YEAR>2012</YEAR> 
     <BEGIN>145</BEGIN> 
     <END>148</END> 
     <VOLUME>35</VOLUME> 
     <VOLNUMBER>10</VOLNUMBER> 
    </PUBLICATION> 
    <PUBLICATION> 
     <AUTHOR>Bradley Woods</AUTHOR> 
     <TITLE>Using Sql Server 2012</TITLE> 
     <NAME>BI Developer Weekly </NAME> 
     <YEAR>2013</YEAR> 
     <BEGIN>15</BEGIN> 
     <END>50</END> 
     <VOLUME>1</VOLUME> 
     <VOLNUMBER>11</VOLNUMBER> 
    </PUBLICATION> 
    <PROJECT> 
     <TITLE>Directory Data Warehouse</TITLE> 
     <NAME>Insurance</NAME> 
     <AMOUNT>$100,000</AMOUNT> 
     <BEGIN>2012</BEGIN> 
     <END>Present</END> 
     <ROLE>Architect</ROLE> 
    </PROJECT> 
    <PROJECT> 
     <TITLE>BI Report Server</TITLE> 
     <NAME>Insurance</NAME> 
     <AMOUNT>$50,000</AMOUNT> 
     <BEGIN>2011</BEGIN> 
     <END>2012</END> 
     <ROLE>Assistant Architect</ROLE> 
    </PROJECT> 
    <PROJECT> 
     <TITLE>CodeIgniter Website</TITLE> 
     <NAME>MentorMe.Com</NAME> 
     <AMOUNT>$10,000</AMOUNT> 
     <BEGIN>2010</BEGIN> 
     <END>2011</END> 
     <ROLE>Lead Developer</ROLE> 
    </PROJECT> 
    <PROJECT> 
     <TITLE>Wordpress Website</TITLE> 
     <NAME>ShavingCulture.com</NAME> 
     <AMOUNT>$3,000</AMOUNT> 
     <BEGIN>2009</BEGIN> 
     <END>2010</END> 
     <ROLE>Developer</ROLE> 
    </PROJECT> 

</VITAE>

来源

2013-06-23 B Woods

'的document.getElementById（ “容器”）写（ '

'）;' ，你为什么这样做？ –

正在寻找div元素来放置我要创建的表 –

它应该是'nodeValue'而不是'NodeValue' –

回答

'/<h4></td>'; => '</h4></td>'

如果你已经厌倦了写作：

document.getElementById("container").innerHTML+=

...你可能会考虑写：

var html = ""; 

html += .... 
html += .... 

document.getElementById("container").innerHTML+= html;

您也写这样的：

var xmlDoc 

function getEducation() 
{ 
    ... 
    var xmlObj = xmlDoc.documentElement;

1）第一行是一个错误，因为它不以分号结尾。
2）xmlDoc未定义，undefined没有名为documentElement的属性。

来源

2013-06-23 19:47:53 7stud

感谢您的纠正，但这并没有工作 –

您是否也将NodeValue更改为nodeValue？ – 7stud

您可以做的另一件事是alert（）或console.log（）从你的xml文件中检索到的值，然后将它们添加到你的html中，看看你是否有正确的值。 – 7stud

xmlDoc中没有定义的地方
你打开了XMLHttpRequest，但是你没有把它

来源

2013-06-23 19:59:17

你如何发送它？我有请求，用get打开它，并获取responseXML。 –

send（）........... – 7stud

调用'xmlhttp.send（null）;'在'xmlhttp.open（“GET”，“cv。xml“，false）;' –

阅读XML和解析到HTML

回答

相关问题