为我的JSON构建一个包含行和列跨度的表

问题描述 投票：-1回答：4

我想达到类似的结果，如下图所示

预期结果：

enter image description here

我期待的是，如果使用递归最受欢迎

我会从后端收到巨大的json，qazxsw poi有50个qazxsw poi

注意：最受欢迎的是递归方法

这是我尝试过的：

user_data
objects
var data = [{
  "user_data": [{
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "hulk"
}, {
  "user_data": [ {
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "gomu"
}];

var tableStr = '';
data.forEach((obj) => {
   var userData = obj.user_data;
   userData.forEach((o) => {
      tableStr += '<tr rowspan="'+userData.length+'"><td>'+o.time1+'</td><td>'+o.time2+'</td><td>'+o.amount+'</td></tr>';
   });
});

$('#user').html(tableStr);
javascript jquery html json node.js
4个回答
2
投票

这可以通过对代码稍作修改来实现。您需要使用colspan添加名称，然后在obj循环中，在末尾添加总计。然后在更新表时，只为tbody元素设置html。如下

table { 
       border-collapse: collapse;
   }

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="user">
    <thead>
        <tr>
          <th>User Name</th>
          <th>Time 1</th>
          <th>Time 2</th>
          <th>Amount</th>
        </tr>
    </thead>
    <tbody>
      
    </tbody>
</table>
var data = [{
  "user_data": [{
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "hulk"
}, {
  "user_data": [ {
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "gomu"
}];

var tableStr = '';
data.forEach((obj) => {
    var userData = obj.user_data;
    var total = 0;
   
    userData.forEach((o, index) => {
      tableStr += '<tr>' + (index == 0 ? '<td rowspan="' + userData.length + '">' + obj.name + '</td>' : '') + '<td>'+o.time1+'</td><td>'+o.time2+'</td><td>'+o.amount+'</td></tr>';
       total += o.amount;
   });
   tableStr += '<tr><td colspan="3">Total</td><td>' + total + '</td></tr>';
});
$('#user tbody').html(tableStr);
1
投票

无需为您的案例使用递归。请看下面的脚本并阅读评论：

table { 
       border-collapse: collapse;
   }

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="user">
    <thead>
        <tr>
          <th>User Name</th>
          <th>Time 1</th>
          <th>Time 2</th>
          <th>Amount</th>
        </tr>
    </thead>
    <tbody>
      
    </tbody>
</table>
var data = [{
  "user_data": [{
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "hulk"
}, {
  "user_data": [ {
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "gomu"
}];

for (i=0; i<data.length; i++) {
  var rows = data[i].user_data.length;
  var html = '';
  var total = 0;
  
  // start rendering user_data
  for (r=0; r<rows; r++) {

    html += '<tr>';
    if (r == 0) { // render for first row of user data only
      html += '<td rowspan="'+rows+'">'+data[i].name+'</td>';
    }
    html += '<td>'+data[i].user_data[r].time1+'</td>';
    html += '<td>'+data[i].user_data[r].time2+'</td>';
    html += '<td>'+data[i].user_data[r].amount+'</td>';
    html += '</tr>';
    total += data[i].user_data[r].amount;
    
  }

  // render total row
  html += '<tr><td colspan="3">Total:</td><td>'+total+'</td></tr>';

  // append user_data into the table
  $('table#user tbody').append(html);
}
1
投票

我宁愿不构建一个字符串。而是使用jQuery DOM函数来生成表：

th, td {
  border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="user">
    <thead>
        <tr>
          <th>User Name</th>
          <th>Time 1</th>
          <th>Time 2</th>
          <th>Amount</th>
        </tr>
    </thead>
    <tbody>
      
    </tbody>
</table>
var data = [{
  "user_data": [{
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2550,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "hulk"
}, {
  "user_data": [{
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 1700,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }, {
    "amount": 2125,
    "time1": "2017/04/05",
    "time2": "2017/04/06"
  }],
  "name": "gomu"
}];

data.forEach(function(row) {
  var user0 = row.user_data[0];
  var users = row.user_data.slice(1);
  var total = 0;

  // first row of the group contains user name and first user_data
  total += user0.amount;
  var $tr = $("<tr></tr>");
  $("<td></td>").attr("rowspan", 1 + users.length).text(row.name).appendTo($tr);
  $("<td></td>").text(user0.time1).appendTo($tr);
  $("<td></td>").text(user0.time2).appendTo($tr);
  $("<td></td>").text(user0.amount).appendTo($tr);
  $tr.appendTo("#user > tbody");


  // create additional rows for remaining user_data
  users.forEach(function(user) {
    total += user.amount;
    var $tr = $("<tr></tr>");
    $("<td></td>").text(user.time1).appendTo($tr);
    $("<td></td>").text(user.time2).appendTo($tr);
    $("<td></td>").text(user.amount).appendTo($tr);
    $tr.appendTo("#user > tbody");
  });

  // total was calculated above
  $tr = $("<tr></tr>");
  $("<td colspan=3>Total</td>").appendTo($tr);
  $("<td></td>").text(total).appendTo($tr);
  $tr.appendTo("#user > tbody");
});
0
投票

您错过了迭代中的总计算逻辑。我在总行中为rowspan和colspan添加了一些额外的格式：

table {
  border-collapse: collapse;
}

td {
  padding: 20px;
  border: 1px solid black;
  text-align: center;
}

注意：此代码段假定“user_data”对象始终具有累积总量的“金额”值。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.