Question

我有一个用json文件填充的html表。当您单击某一行时，如果该行具有子行（子行），则在单击该行时将显示这些子行（最初隐藏子行）。

正如我所提到的，我有一个json文件但是对于这个例子，我将使用一个javascript数组：

   var data = [
 {    

     "ID" : 2,
     "FirstName" : "John",
     "LastName" : "Test",
     "DOB": "Test",
     "Gender":"M",
     "HeadNodeId":0
    },

     {
     "ID" : 3,
     "FirstName" : "Test",
     "LastName" : "Test",
     "DOB": "Test",
     "Gender":"M",
     "HeadNodeId":2
    },

     {
     "ID" : 4,
     "FirstName" : "Helen",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M",
     "HeadNodeId":0
    }

];

这里比较的2个元素是＆＃34; ID＆＃34;和＃34; HeadNodeId＆＃34;。如果＆＃34; HeadNodeId＆＃34;与＆＃34; ID＆＃34;具有相同的编号，然后是该行的子编号。我有JavaScript代码来执行此操作，但只显示一个父行及其子行，而不是其他没有子行的行：

所以这是有效的：

{ 
  "ID" : 2,
 "FirstName" : "John",
 "LastName" : "Test",
 "DOB": "Test",
 "Gender":"M",
 "HeadNode":0
},

 {
 "ID" : 3,
 "FirstName" : "Test",
 "LastName" : "Test",
 "DOB": "Test",
 "Gender":"M",
 "HeadNode":2
},

 {
 "ID" : 3,
 "FirstName" : "Test",
 "LastName" : "Test",
 "DOB": "Test",
 "Gender":"M",
 "HeadNode":2
},

 {
 "ID" : 3,
 "FirstName" : "Test",
 "LastName" : "Test",
 "DOB": "Test",
 "Gender":"M",
 "HeadNode":2
}

父行及其子行正在运行，但这些行根本没有显示。这些不是子行，因此应始终显示它们：

{
     "ID" : 4,
     "FirstName" : "Helen",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M",
     "HeadNode":0
    },

    {
     "ID" : 5,
     "FirstName" : "Helen",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M",
     "HeadNode":0
    }

似乎我的外部循环只是迭代一次。以下是此代码段：

var i=0;
var k=0;
function populate(){

    var data = [
 {    

     "ID" : 2,
     "FirstName" : "John",
     "LastName" : "Test",
     "DOB": "Test",
     "Gender":"M",
     "HeadNode":0
    },

     {
     "ID" : 3,
     "FirstName" : "Test",
     "LastName" : "Test",
     "DOB": "Test",
     "Gender":"M",
     "HeadNode":2
    },

     {
     "ID" : 3,
     "FirstName" : "Test",
     "LastName" : "Test",
     "DOB": "Test",
     "Gender":"M",
     "HeadNode":2
    },

     {
     "ID" : 3,
     "FirstName" : "Test",
     "LastName" : "Test",
     "DOB": "Test",
     "Gender":"M",
     "HeadNode":2
    },

     {
     "ID" : 4,
     "FirstName" : "Helen",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M",
     "HeadNode":0
    },

    {
     "ID" : 5,
     "FirstName" : "Helen",
     "LastName" : "Test",
     "DOB": "03-12-1959",
     "Gender":"M",
     "HeadNode":0
    }

];

  var tr, td;
  var tbody = document.getElementById("data");

    // loop through data source
    for (i; i < data.length; i++) {
        if(data[i].ID == data[k].HeadNode){break;}

        tr = tbody.insertRow(tbody.rows.length);
        td = tr.insertCell(tr.cells.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = data[i].ID;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].FirstName;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].LastName;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].DOB;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].Gender;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[i].HeadNode;



      for (k; k < data.length; k++) {
         if(data[i].ID == data[k].HeadNode){
        tr = tbody.insertRow(tbody.rows.length);
        tr.className = "subnode";
        td = tr.insertCell(tr.cells.length);
        td = tr.insertCell(tr.cells.length);
        td.setAttribute("align", "center");
        td.innerHTML = data[k].ID;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[k].FirstName;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[k].LastName;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[k].DOB;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[k].Gender;
        td = tr.insertCell(tr.cells.length);
        td.innerHTML = data[k].HeadNode;
       }
    }
   } 
}

我觉得这是问题的一部分：

if(data[i].ID == data[k].HeadNode){break;}

如何使用纯JavaScript（无库）修复此问题？任何帮助将不胜感激

Answer 1

您应该更改整个方法。这是我的建议。

var doc = document;
function E(e){
  return doc.getElementById(e);
}
function C(e){
  return doc.createElement(e);
}
var tbody = E('data'), ord = ['FirstName', 'LastName', 'DOB', 'Gender']; // Object Literals make their own order
for(var i=0,l=data.length; i<l; i++){
  var o = data[i], tr = C('tr');
  for(var n=0,q=ord.length; n<q; n++){
    var td = C('td');
    td.innerHTML = o[ord[n]]; tr.appendChild(td);
  }
  tbody.appendChild(tr);
}

Answer 2

一般情况如下：

for i {
    if data[I].HeadNodeId !== 0) continue;
    // Render "parent"
    for k
        if (data[k].HeadNodeId !== data[I].Id) {
        // Render child
    }
}

使用JavaScript缺少JSON值

2 个答案: