Question

我想使用java脚本，html和jquery创建动态矩阵类型数据显示，显示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);
});

问题是代码工作正常，但不会根据日期显示唯一数据。例如，如上面的链接＆＃34;日期：11-12-2013＆＃34;重复两次，我不想要。我想显示独特的数据。

我想要的输出是： enter image description here

Answer 1

试试这个

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

Answer 2

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

虽然这与你已经拥有的响应类似，但它看到了Jquery不喜欢多个元素具有与前一个答案对列相同的ID的事实。

Answer 3

另一种解决方案是在开始构建HTML之前组织reservations。

您可以使用以下函数执行此操作：

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

您可以用几种不同的方式编写此函数。但是，这个想法是一样的 - 按照你想要的方式组织数据结构，然后构建你的HTML。无论如何，这是DEMO。

Answer 4

如果尝试使用Vanilla JS进行以下方法，我试着让它变得简单而干净，以便从没有JQuery的粉丝中轻松理解，尽管它从上面的答案中获益。

＆＃13;

var tbody = document.querySelector('#reservations').querySelector('tbody');
var props = ["date", "MCHC", "CBC", "Pulse rate", "weight"];

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 cache = {},
    date;
reservations.forEach(function(reservation, rIndex){
    date = reservation['date'];
    if (!cache[date]) {
      cache[date] = 'yes';
      var tr = tbody.insertRow(rIndex);
      tr.id = 'id'+date;
      props.forEach(function(){tr.insertCell();})
      tbody.appendChild(tr);
    } 
    var row = tbody.querySelector('#id'+date).rowIndex - 1;
    props.forEach(function(prop,pIndex){
       if(reservation[prop]) 
         tbody.rows[row].cells[pIndex].innerHTML=reservation[prop];
    })
});

＆＃13;

table { border-collapse: collapse; }

＆＃13;

<table id="reservations" border="2px;">
        <thead>
            <tr>
                <th>Date\Mesurment</th><th>MCHC</th><th>CBC</th><th>Pulse rate</th><th>weight</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
  </table>

＆＃13;

对于那些从数据库中读取的人来说，很可能没有2行具有相同的日期，所以很简单，他们可以使用下面的JS代码：

reservations.forEach(function(reservation, rIndex){
      var row = tbody.insertRow(rIndex);
      props.forEach(function(prop,pIndex){
        row.insertCell();
        if(reservation[prop]) 
             tbody.rows[rIndex].cells[pIndex].innerHTML=reservation[prop];
    })
});

如何创建矩阵表

4 个答案: