为我的JSON构建具有行和列跨度的表

时间：2018-08-01 17:07:51

标签： javascript jquery html json node.js

我想要达到下图所示的相似结果

预期结果：

enter image description here

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

来完成

我将从后端收到巨大的json，其中user_data具有50个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);
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>

4 个答案:

答案 0 :(得分：2)

这可以通过对您的代码进行一些小的修改来实现。您需要添加带有colspan的名称，然后在obj循环中，在末尾添加总计。然后，在更新表时，仅将tbody元素设置为html。像下面一样

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);
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>

答案 1 :(得分：1)

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

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);
}
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>

答案 2 :(得分：1)

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

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");
});
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>

答案 3 :(得分：0)

您缺少迭代中的总计算逻辑。我为总行中的rowpan和colspan添加了一些额外的格式：

data.forEach((obj) => {
    var userData = obj.user_data;
    var rowTotal = 0;
    var rowsize;
    tableStr += '<tr><td rowspan="'userData.length'">obj.name</td>
    userData.forEach((o, index) => {
        if(index > 0) {
            tableStr += '<tr>'
        } else {
            rowsize = Object.keys(o).length;
        }
        Object.values(o).forEach((value) => {
            tableStr += '<td>' + value + '</td>';
        });
        rowTotal += o.amount;
        tableStr += '</tr>';
    });
    tableStr += '<tr><td colspan="' + rowsize + '">Total</td><td>'+rowTotal+'</td></tr>'
});

注意：此摘要假定“ user_data”对象始终具有累计的“金额”值。

相关问题
最新问题