Javascript 如何创建矩阵表

我想使用java脚本、html和jquery创建动态矩阵类型的数据显示，如图所示

var保留=[
{“日期”：“22-12-2013”，“MCHC”：“22”，“脉搏率”：“75”，“重量”：“50”}，
{“日期”：“11-12-2013”，“CBC”：“5”}，
{“日期”：“2013年11月12日”，“重量”：“55”}
];
var tbody=$（“#保留tbody”），
道具=[“日期”、“MCHC”、“CBC”、“脉搏率”、“重量”]；
$。每个（预订，功能（i，预订）{
var tr=$（''）；
美元。每个（道具、功能（i、道具）{
$（''）.html（保留[prop]）.appendTo（tr）；
});
tbody.append（tr）；
});

问题是代码工作正常，但它不显示基于日期的唯一数据。 例如，如上面的链接所示，“日期：11-12-2013”重复了两次，这是我不想看到的。我想显示唯一的数据

我期望的输出是： 试试这个

var保留=[
{“日期”：“22-12-2013”，“MCHC”：“22”，“脉搏率”：“75”，“重量”：“50”}，
{“日期”：“11-12-2013”，“CBC”：“5”}，
{“日期”：“2013年11月12日”，“重量”：“55”}
];
var tbody=$（“#保留tbody”），
道具=[“日期”、“MCHC”、“CBC”、“脉搏率”、“重量”]；
$。每个（预订，功能（i，预订）{
var trid=预订[“日期”]；
如果（$（“#”+trid）。长度
var保留=[{
“日期”：“2013年12月22日”，
“MCHC”：“22”，
“脉搏率”：“75”，
“重量”：“50”
}, {
“日期”：“2013年11月12日”，
“CBC”：“5”
}, {
“日期”：“2013年11月12日”，
“重量”：“55”
}];
var tbody=$（“#保留tbody”），
道具=[“日期”、“MCHC”、“CBC”、“脉搏率”、“重量”]；
$。每个（预订，功能（i，预订）{
//获取预订的日期值
var tr=$（'td:contains（“+reservation.date+”））。最近（'tr'）；
如果（tr.length另一个解决方案是在开始构建HTML之前组织
预订

您可以通过使用以下函数来实现：

function uniqueReservation(reservations) {
  var results = [],
      cache = {}, 
      reservation,date;

  for (var i=0;i<reservations.length;i++) {
    reservation = reservations[i];
    date = reservation.date;

    if (!cache[date]) {
      cache[date] = {};
      results.push(cache[date]);
    } else {
        cache[date] = cache[date];
    }


    for (var k in reservation) {
        cache[date][k] = reservation[k];
    }
  }

  console.log('results',results);
  return results;
}


//before you pass reservations to $.each
reservations = uniqueReservation(reservations);

函数唯一查询保留（保留）{
var结果=[]，
缓存={}，
预订日期；
对于（var i=0；i如何使用
Vanilla JS
尝试下面的方法，我试图使其简单明了，以便不使用JQuery的粉丝容易理解，尽管它从上面的答案中受益匪浅


var tbody=document.querySelector（'#reservations'）。querySelector（'tbody'）；
var props=[“日期”、“MCHC”、“CBC”、“脉搏率”、“重量”]；
var保留=[
{“日期”：“22-12-2013”，“MCHC”：“22”，“脉搏率”：“75”，“重量”：“50”}，
{“日期”：“11-12-2013”，“CBC”：“5”}，
{“日期”：“2013年11月12日”，“重量”：“55”}
];
var cache={}，
日期；
预订.forEach（功能（预订，rIndex）{
日期=预订[‘日期’]；
如果（！缓存[日期]）{
缓存[日期]=“是”；
var tr=tbody.insertRow（rIndex）；
tr.id='id'+日期；
forEach（函数（）{tr.insertCell（）；}）
t附肢儿童（tr）；
} 
var row=tbody.querySelector（'#id'+date）.rowIndex-1；
道具forEach（功能（道具、pIndex）{
如果（预订[道具]）
tbody.rows[row].cells[pIndex].innerHTML=reservation[prop]；
})
})；
表{边框折叠：折叠；}

日期\MESURMENTMCHCCBC脉冲率重量
我想知道这个问题是如何得到+4的，甚至没有任何评论。我相信你只需要在$.each（…）序列之前对数组进行排序和重新组装。好的，如果你的数组总是这样，这意味着“reservation”元素中不会有双倍的道具，只需过滤然后将日期与“reservation”的其余部分合并即可。
var reservations = [
    {"date":"22-12-2013","MCHC":"22","Pulse rate":"75","weight":"50" },
    {"date":"11-12-2013","CBC":"5"},
    {"date":"11-12-2013","weight":"55"}
];
var tbody = $('#reservations tbody'),
    props = ["date", "MCHC", "CBC", "Pulse rate", "weight"];
$.each(reservations, function(i, reservation) {
  var trid = reservation["date"];
    if($("#"+trid).length <= 0) {
      var tr = $('<tr>').attr("id",trid);
      $.each(props, function(i, prop) {
        var tdid = prop.replace(/\s/g, '');
        $('<td>').html(reservation[prop]).attr("id",tdid).appendTo(tr);  
      });
      tbody.append(tr);
    }
    else {
      $.each(props, function(i, prop) {
        var tdid = prop.replace(/\s/g, '');
          $("#"+trid).find("td#"+tdid).html(reservation[prop])
      });  
    }
});

var reservations = [{
"date": "22-12-2013",
    "MCHC": "22",
    "Pulse rate": "75",
    "weight": "50"
}, {
"date": "11-12-2013",
    "CBC": "5"
}, {
 "date": "11-12-2013",
    "weight": "55"
}];
var tbody = $('#reservations tbody'),
props = ["date", "MCHC", "CBC", "Pulse rate", "weight"];
$.each(reservations, function (i, reservation) {
//get the date value of the reservation
var tr = $('td:contains("' + reservation.date +'")').closest('tr');
if (tr.length <= 0)
{
     tr = $('<tr>');
}
$.each(props, function (i, prop) {
    var td = tr.children('.' + prop);
    if (td.length <= 0)
    {            $('<td>').html(reservation[prop]).appendTo(tr).addClass(prop.replace(/\s/g, ''));
    } else 
    {
        td.html(reservation[prop]);
    }
});
tbody.append(tr);
});

function uniqueReservation(reservations) {
  var results = [],
      cache = {}, 
      reservation,date;

  for (var i=0;i<reservations.length;i++) {
    reservation = reservations[i];
    date = reservation.date;

    if (!cache[date]) {
      cache[date] = {};
      results.push(cache[date]);
    } else {
        cache[date] = cache[date];
    }


    for (var k in reservation) {
        cache[date][k] = reservation[k];
    }
  }

  console.log('results',results);
  return results;
}


//before you pass reservations to $.each
reservations = uniqueReservation(reservations);