1

我必须创建一个树结构表，其中包含一些以 json 数组形式给出的数据。

让我们举一个例子数组

array :
[
{ "continent": "Asia", "country":"India", "population": 100, "GDP":4},
{ "continent": "Asia", "country":"china", "population": 130, "GDP":20},
{ "continent": "Asia", "country":"Pakistan", "population": 20, "GDP":1},
{ "continent": "Europe", "country":"UK", "population": 2, "GDP":15},
{ "continent": "Europe", "country":"France", "population": 4, "GDP":16},
{ "continent": "Europe", "country":"Germany", "population": 5, "GDP":21}
]

桌子就像一棵可以展开或折叠的树。让树像，

    continent          country         population       GDP

    Asia           +                   250               25

    Europe         -                   11                52
                       UK              2                 15
                       France          4                 16
                       Germany         5                 21

在上表中我们扩展了欧洲，在下表中我们扩展了亚洲。

    continent           country            population       GDP

    Asia           -                       250              25
                        India              100              4
                        China              130              20
                        Pakisthan          20               1

    Europe       +                         11               52

请帮助我创建具有汇总值的表格。

谢谢 ：）

4

2 回答 2

2

您在标签中提到javascript，所以我假设您需要 JS 中的答案。我给你的关键词是你需要学习的。

首先，声明变量。

var regions = [
  { "continent": "Asia", "country":"India", "population": 100, "GDP":4},
  { "continent": "Asia", "country":"china", "population": 130, "GDP":20},
  { "continent": "Asia", "country":"Pakistan", "population": 20, "GDP":1},
  { "continent": "Europe", "country":"UK", "population": 2, "GDP":15},
  { "continent": "Europe", "country":"France", "population": 4, "GDP":16},
  { "continent": "Europe", "country":"Germany", "population": 5, "GDP":21}
];

然后，您需要一些东西来保存各种答案：

变量结果 = {}; // 注意，这是一个对象。不是数组。

接下来，使用标准循环处理遍历数组。如果for您需要支持较旧的浏览器，.forEach如果您只能针对较新的浏览器，则为循环。

对于每个循环，查看是否continent存在于results. 如果不是，则添加property值为 0 的 。

GDP然后只是积累results[<continent>]

于 2012-09-08T18:00:04.343 回答
1 

function showHide(){
  var td = this,
      tr = this.parentElement,
      next = td.nextElementSibling;
  if(tr.className == 'visible'){
    var rowSpan = td.rowSpan;
    td.oldRowSpan = rowSpan;
    td.rowSpan = next.rowSpan = 1;
    tr.className = 'collapsed';
    for(var i=1; i<rowSpan; ++i){
      tr = tr.nextElementSibling;
      tr.className = 'hidden';
    }
  }else{
    td.rowSpan = next.rowSpan = td.oldRowSpan;
    rowSpan = td.oldRowSpan;
    tr.className = 'visible';
    for(var i=1; i<rowSpan; ++i){
      tr = tr.nextElementSibling;
      tr.className = '';
    }
  }
}
var data = [
  { "continent": "Asia", "country":"India", "population": 100, "GDP":4},
  { "continent": "Asia", "country":"china", "population": 130, "GDP":20},
  { "continent": "Asia", "country":"Pakistan", "population": 20, "GDP":1},
  { "continent": "Europe", "country":"UK", "population": 2, "GDP":15},
  { "continent": "Europe", "country":"France", "population": 4, "GDP":16},
  { "continent": "Europe", "country":"Germany", "population": 5, "GDP":21}
], obj = {};
for(var i=0; i<data.length; ++i) {
  var continent = data[i].continent,
      arr = obj[continent] = obj[continent] || [];
  arr.push([data[i].country,data[i].population,data[i].GDP]);   
}
var table = document.createElement('table'),
    thead = document.createElement('thead'),
    tbody = document.createElement('tbody'),
    tr = document.createElement('tr');
var keys = ['','Continent','Country','Population','GDP'];
for(var i=0; i<keys.length; ++i){
  var td = document.createElement('td');
  td.appendChild(document.createTextNode(keys[i]));
  tr.appendChild(td);
}
thead.appendChild(tr);
table.appendChild(thead);
for(var i in obj) {
  var dataArr = [];
  tr = document.createElement('tr'),
    td = document.createElement('td');
  td.rowSpan = obj[i].length + 1;
  td.onclick = showHide;
  tr.appendChild(td);
  td = document.createElement('td');
  td.appendChild(document.createTextNode(i));
  td.rowSpan = obj[i].length + 1;
  tr.appendChild(td);
  tbody.appendChild(tr);
  for(var j=0; j<obj[i].length; ++j){
    var subTr =  document.createElement('tr');
    for(var k=0; k<obj[i][j].length; ++k){
      td = document.createElement('td');
      if(k>0) dataArr[k] = (dataArr[k] || 0) + obj[i][j][k];
      td.appendChild(document.createTextNode(obj[i][j][k]));
      subTr.appendChild(td);
    }
    tbody.appendChild(subTr);
  }
  for(var j=0; j<dataArr.length; ++j){
    td = document.createElement('td')
    td.className = 'data-sum';
    if(dataArr[j]) td.appendChild(document.createTextNode(dataArr[j]));
    tr.appendChild(td);
  }
  tr.className = 'visible';
}
table.appendChild(tbody);
document.body.appendChild(table);
table {
  border-collapse: collapse;
}
thead {
  font-weight: bold;
  font-size: 120%
}
td {
  border: 2px solid black;
}
.hidden, .visible > .data-sum {
  display: none;
}
.collapsed > :first-child, .visible > :first-child {
  cursor: pointer;
}
.collapsed > :first-child:before {
  content: '[+]';
  font-family: monospace;
}
.visible > :first-child:before {
  content: '[-]';
  font-family: monospace;
}

于 2012-09-08T18:40:17.570 回答