Wie matrix erstellen Tabelle

Möchte ich für die Erstellung von dynamischen matrix Anzeige von Daten mit Hilfe von java script, html und jquery, die angezeigt wird,hier.

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

Das problem ist, dass der code richtig funktioniert, aber es funktioniert nicht eindeutige Daten basierend auf dem Datum.
Zum Beispiel, wie gezeigt in den obigen link "Datum:11-12-2013" zweimal wiederholt wird, die ich nicht will. Ich will eindeutige Daten.

Meine gewünschte Ausgabe:
Wie matrix erstellen Tabelle

Ich Frage mich, wie diese Frage hab +4, ohne auch nur ein Kommentar. Ich glaube, dass Sie nur noch Sortieren und wieder zusammenbauen das array vor dem $.jeder(...) Sequenz.
OK, wenn das array ist IMMER auf diese Art, was bedeutet, es wird nicht verdoppelt werden Requisiten in eine 'Reservierung' - element, filtern nur dann beitreten, neben dem Datum, der rest eine 'Reservierung'.

InformationsquelleAutor Sharvari | 2013-12-28

Versuchen, diese

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

Danke für Antworten seine Arbeit richtig.

InformationsquelleAutor rynhe

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

Zwar ist dies ähnlich zu der Antwort, die Sie schon haben, sieht es bei der Tatsache, dass Jquery nicht mag, mehrere Elemente mit der gleichen ID, die der vorherigen Antwort hatte mit den Spalten.

InformationsquelleAutor SkyrawrCode

Andere Lösung wäre, sich zu organisieren reservations bevor Sie beginnen den Bau der HTML.

Könnten Sie tun, dass durch die Verwendung einer Funktion wie:

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

Wahrscheinlich könnte man schreiben, diese Funktion ein paar verschiedene Möglichkeiten. Aber die Idee ist die gleiche - organisieren Sie die Datenstruktur, wie Sie es wollen und dann bauen Sie Ihre HTML. Wie auch immer, hier ist DEMO.

InformationsquelleAutor fbynite

Was ist mit versuchen, die unter Ansatz mit Vanilla JS habe ich versucht es einfach zu machen und reinigen, um leicht verständlich zu sein von der no JQuery-fans, obwohl es immer Vorteile von den oben genannten Antworten.

JS:

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

CSS:

table { border-collapse: collapse; }

HTML:

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

Für diejenigen, die Lesen aus der Datenbank, wahrscheinlich wird es keine 2 Zeilen mit dem gleichen Datum, so einfach können Sie verwenden Sie die unten JS-code:

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

InformationsquelleAutor Hasan A Yousef

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.