-1

我正在尝试读取 xml 并将其内容打印到屏幕上。该表正确显示，但我无法弄清楚为什么每个数据行没有正确填充。

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>
4

2 回答 2

1 
'/<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 是未定义的，并且未定义没有名为 documentElement 的属性。

于 2013-06-23T19:47:53.183 回答
1
  1. xmlDoc 未在某处定义
  2. 你打开了 XMLHttpRequest，但你没有发送它
于 2013-06-23T19:59:17.120 回答