具有主从关系的数据表 ajax xml 显示

Question

通过那个 jQ bootstrap 4 数据表网格（datatable.net），我希望以表格形式显示以下 xml 文件：

<?xml version="1.0" encoding="UTF-8"?>

 <persns> 

  <prsn> 

  <fname>Smith</fname>  <!-- first name-->

  <lname>Milton</lname> <!-- last name --> 

  <age>44</age> 

  <e-mail>[e-mail]</e-mail> 

  <phnmbr>3568236712</phnmbr>

  <addrss>5th summer st, mntb</addrss>

  <city>Portland</city>

 </prsn>

 <prsn> 

  <fname>Ken</fname> 

  <lname>Jackson</lname> 

  <age>37</age>

  <e-mail>[e-mail]</e-mail> 

  <phnmbr>2638762076</phnmbr> 

  <addrss>19th Penfield ave, brtcl</addrss>

  <city>Kelowna</city>

 </prsn>

 <prsn> 

  <fname>Susan</fname>

  <lname>Arkland</lname> 

  <age>48</age>

  <e-mail>[e-mail]</e-mail>

  <phnmbr>50834219704</phnmbr>

  <addrss>34th Mansfield st, sgtp</addrss>

  <city>Raleigh</city>

 </prsn>

 <prsn>

  <fname>Patsy</fname> 

  <lname>Brighton</lname>

  <age>38</age>

  <e-mail>[e-mail]</e-mail> 

  <phnmbr>814522096358</phnmbr> 

  <addrss>12th Peel st, pnslv</addrss>

  <city>Philadelphia</city>

 </prsn>

 <prsn>

  <fname>John</fname>

  <lname>Torg</lname>

  <age>54</age>

  <e-mail>[e-mail]</e-mail> 

  <phnmbr>042197327784</phnmbr>

  <addrss>27th north st, cnda</addrss>

  <city>Penticton</city>

</prsn>

但具有主详细信息功能，如以下小提琴链接所示：

https://jsfiddle.net/nnb97rh9/3/

只有到那个小提琴才有.json数据！（我需要 .xml 显示）相应的（几乎是功能性的）.js （通过主表我只想显示以下表标题：fname、lname、age、city 而其余部分将被隐藏

Answer 1

代码存在多个问题，无法描述。以下是更正后的代码。请注意我使用 jsFiddle 机制来检索 XML 文件，替换为您自己的。(function () {&nbsp; &nbsp;function format(d) {&nbsp; &nbsp; &nbsp; return '<table cellpadding="3" cellspacing="0" border="0" style="padding-left: 40 px ">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'<tr>' + '<td>e-mail addrss</td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'<td>' + d['e-mail'] + '</td>' + '</tr>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'<tr>' + '<td>phn nmber</td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'<td>' + d['phnmbr'] + '</td>' + '</tr>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'<tr>' + '<td>address</td>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'<td>' + d['addrss'] + '</td>' + '</tr>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'</table>';&nbsp; &nbsp;}&nbsp; &nbsp;var prstbl = $("#prsns").DataTable({&nbsp; &nbsp; &nbsp; columns: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "class": 'details-control',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "orderable": false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "data": null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "defaultContent": ''&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: "fname"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: "lname"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: "age"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: "city"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: "e-mail",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "visible": false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: "phnmbr",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "visible": false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: "addrss",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "visible": false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp;});&nbsp; &nbsp;$.ajax({&nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; url: "/echo/xml",&nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xml: '<?xml version="1.0" encoding="UTF-8" ?><persns>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<prsn><fname>Smith</fname><lname>Milton</lname><age>44</age><e-mail>[e-mail]</e-mail><phnmbr>3568236712</phnmbr><addrss>5th summer st, mntb</addrss><city>Portland</city></prsn>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<prsn><fname>Ken</fname><lname>Jackson</lname><age>37</age><e-mail>[e-mail]</e-mail><phnmbr>2638762076</phnmbr><addrss>19th Penfield ave, brtcl</addrss><city>Kelowna</city></prsn>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<prsn><fname>Susan</fname><lname>Arkland</lname><age>48</age><e-mail>[e-mail]</e-mail><phnmbr>50834219704</phnmbr><addrss>34th Mansfield st, sgtp</addrss><city>Raleigh</city></prsn>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<prsn><fname>Patsy</fname><lname>Brighton</lname><age>38</age><e-mail>[e-mail]</e-mail><phnmbr>814522096358</phnmbr><addrss>12th Peel st, pnslv</addrss><city>Philadelphia</city></prsn>'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + '<prsn><fname>John</fname><lname>Torg</lname><age>54</age><e-mail>[e-mail]</e-mail><phnmbr>042197327784</phnmbr><addrss>27th north st, cnda</addrss><city>Penticton</city></prsn>'&nbsp; &nbsp; &nbsp; &nbsp; + '</persns>',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; dataType: 'xml',&nbsp; &nbsp; &nbsp; success: function (xml) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var prsns = $(xml).find("prsn");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;prsns.each(function (idx, prs) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var rowData = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(prs).children().each(function (j, chdnd) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rowData[$(chdnd).get(0).tagName] = $(chdnd).text();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; prstbl.row.add(rowData);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; prstbl.draw();&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;});&nbsp; &nbsp; $('#prsns tbody').on('click', 'td.details-control', function () {&nbsp; &nbsp; &nbsp; var tr = $(this).closest('tr');&nbsp; &nbsp; &nbsp; var row = prstbl.row(tr);&nbsp; &nbsp; &nbsp; // if the row is already expanded, collapse it&nbsp; &nbsp; &nbsp; if (row.child.isShown())&nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; row.child.hide();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tr.removeClass('shown');&nbsp; &nbsp; &nbsp; &nbsp; // if collapsed row, expand it&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;row.child(format(row.data())).show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tr.addClass('shown');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;});})();有关代码和演示，请参阅更新的示例。