如何创建矩阵表 [英] How to create matrix table

问题描述

我想用Java脚本，html和jquery创建动态矩阵类型的数据显示，它显示在

  var reservations = [
 {date：22-12-2013​​，MCHC：22，脉率： 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（预订，函数（i，预订）{
 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 ]）
}）; 
} 
}）; 
  

I want to create dynamic matrix type data display using java script, html, and jquery which is shown here.

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 tr = $('<tr>');
  $.each(props, function(i, prop) {
       $('<td>').html(reservation[prop]).appendTo(tr);  
  });
  tbody.append(tr);
});

The problem is that the code is working properly but it does not display unique data based on date. For example, as shown in the above link "date:11-12-2013" is repeated twice which I don't want. I want to display unique data.

My desired output is:

解决方案

Try this

Live Demo

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

这篇关于如何创建矩阵表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！