javascript - 解析 XML 代码并创建长度标签表

Question

我已经创建了一个代码，以简单的模式解析 XML 结构。 以下代码:

function crea(l) 
{
    for(var i=0; i<l.length;i++)
    {
        var nome_nodo = l[i].getElementsByTagName("nome");
        var nome = nome_nodo[0].firstChild.nodeValue;
        var cognome_nodo = l[i].getElementsByTagName("cognome");
        var cognome = cognome_nodo[0].firstChild.nodeValue;
        var materia_nodo  = l[i].getElementsByTagName("materia");
        var materia = materia_nodo[0].firstChild.nodeValue;
        var tipo_nodo = l[i].getElementsByTagName("tipo");
        var tipo = tipo_nodo[0].firstChild.nodeValue;   
    }
}

变量定义

l: 是XML节点“dipendente”
的参数 nome_nodo:读取XML文件中第一个出现的“nome”
nome:获取 nome_nome
的第一个 child
现在我想创建一个具有动态行的 html 表，特别是如果我在 XML 中有 3 个元素，则代码制作一个包含 4 行的表(默认标题和 3 行，前一个变量中声明了参数)。

示例

读取3个内容，表格结果:

行(0) => 默认行
第 (1) 行 => 读取参数
第 (2) 行 => 读取参数
第 (3) 行 => 读取参数

XML 结构

<?xml version="1.0"?>
<istituto>
    <dipendente categoria="Professore">
        <nome>Gennarino</nome>
        <cognome>Divi</cognome>
        <materia>Sistemi e reti, tec.prog.sist.inf.te.</materia>
        <tipo>Professore</tipo>
    </dipendente>   
    <dipendente categoria="Professore">
        <nome>Luca</nome>
        <cognome>Salza</cognome>
        <materia>Sistemi e reti, gest.prg.organ.d'imp,tec.prog.sist.inf.te</materia>
        <tipo>Professore</tipo>
    </dipendente>   
</istituto> 

我知道创建表的模式，算法如下:

function creaTabella()
{
     var body = document.getElementsByTagName('body')[0]; 
     var tabella = document.createElement('table');
     var tbdy = document.createElement('tbody');          

     for(var i = 0; i < 4; i++) 
     {
         var tr = document.createElement('tr');              

         for(var j = 0; j < 8; j++)                             //columns
        {
             var td = document.createElement('td');                 
             tr.appendChild(td);                            
        }
        tbdy.appendChild(tr);
    }
}

问题是如何通过解析器代码传递参数读取，因为这个表有一个默认结构，但我需要一个动态表来创建行，其中包含在 XML 文件中读取的元素数。
谁能帮帮我？

Answer 1

当你说你有一个默认结构时，我猜你有一个 HTML 表，它要么已经在页面上，要么需要添加到页面，但在任何一种情况下，它都有与XML 的子元素。在这种情况下，您只需要解析 XML，遍历 XML 的行并将行添加到您的表中。因此，我构建了以下示例。

var xml = '<?xml version="1.0"?>' + 
'<istituto>' + 
'   <dipendente categoria="Professore">' + 
'    <nome>Gennarino</nome>' +
'        <cognome>Divi</cognome>' +
'        <materia>Sistemi e reti, tec.prog.sist.inf.te.</materia>' +
'        <tipo>Professore</tipo>' +
'    </dipendente>' +
'    <dipendente categoria="Professore">' +
'        <nome>Luca</nome>' +
'        <cognome>Salza</cognome>' +
'        <materia>Sistemi e reti, gest.prg.organ.d\'imp,tec.prog.sist.inf.te</materia>' +
'        <tipo>Professore</tipo>' +
'    </dipendente>' +
'</istituto>';


var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xml, "text/xml");

var rows = xmlDoc.getElementsByTagName("dipendente");
var tableBody = document.querySelector("tbody");

createTabella(tableBody, rows);

function createTabella(table, xmlRows){
   for (var i=0; i < xmlRows.length; i++){
    var tr = document.createElement("tr");
    tr.appendChild(buildTD(xmlRows[i], "nome"));
    tr.appendChild(buildTD(xmlRows[i], "cognome"));
    tr.appendChild(buildTD(xmlRows[i], "materia"));
    tr.appendChild(buildTD(xmlRows[i], "tipo"));
    tableBody.appendChild(tr);
  } 
}

function buildTD(parentElement, elementName){
  var el = parentElement.getElementsByTagName(elementName)[0];
  var td = document.createElement("td");
  td.textContent = el.textContent; 
  return td;
}

这是一个 Plunker展示它是如何工作的。