function displayResults(container, results) {
var h2 = $('<h2>', {
'class': 'text-center col-md-12',
text: "Itinerary: " + results.itinerary
});
h2.appendTo(container);
var table = $("<table>", {
'class' : 'table table-hover table-bordered'
});
var thead = $("<thead>");
var tr = $("<tr>");
var th = $('<th>', {
text: 'N°',
});
th.appendTo(tr);
$.each(results.seats[0].rows, function(i, row) {
var th = $('<th>', {
text: row.seatNUmber,
'style': "width:10%",
});
th.appendTo(tr);
});
tr.appendTo(table);
thead.appendTo(table);
var tbody = $("<tbody>");
$.each(results.seats, function(i, seat) {
var tr = $("<tr>");
var td = $('<td>', {
text: i+1,
});
td.appendTo(tr);
$.each(seat.rows, function(i, row) {
if(row.IsAvailable){
var clase = 'success';
}else{
var clase = 'error ';
}
var td = $('<td>', {
'class': clase,
});
td.appendTo(tr);
});
tr.appendTo(table);
});
tbody.appendTo(table);
var tfoot = $("<tfoot>");
var tr = $("<tr>");
var th = $('<th>', {
text: 'N°',
'style': "width:5%",
});
th.appendTo(tr);
$.each(results.seats[0].rows, function(i, row) {
var th = $('<th>', {
text: row.seatNUmber,
});
th.appendTo(tr);
});
tr.appendTo(table);
tfoot.appendTo(table);
table.appendTo(container);
}
var results1 = {
itinerary: "01",
seats: [{
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": true
}, {
"seatNUmber": "C",
"IsAvailable": false
}, {
"seatNUmber": "D",
"IsAvailable": true
}]
}, {
rows: [{
"seatNUmber": "A",
"IsAvailable": true
}, {
"seatNUmber": "B",
"IsAvailable": false
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": true
}]
}, {
rows: [{
"seatNUmber": "A",
"IsAvailable": true
}, {
"seatNUmber": "B",
"IsAvailable": true
}, {
"seatNUmber": "C",
"IsAvailable": false
}, {
"seatNUmber": "D",
"IsAvailable": false
}]
}, {
rows: [{
"seatNUmber": "A",
"IsAvailable": true
}, {
"seatNUmber": "B",
"IsAvailable": false
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": true
}]
}, {
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": true
}, {
"seatNUmber": "C",
"IsAvailable": false
}, {
"seatNUmber": "D",
"IsAvailable": true
}]
}]
};
var results2 = {
itinerary: "02",
seats: [{
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": true
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": false
}, {
"seatNUmber": "E",
"IsAvailable": false
}, {
"seatNUmber": "F",
"IsAvailable": true
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": false
}, {
"seatNUmber": "J",
"IsAvailable": true
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": true
}, {
"seatNUmber": "B",
"IsAvailable": false
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": false
}, {
"seatNUmber": "E",
"IsAvailable": true
}, {
"seatNUmber": "F",
"IsAvailable": true
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": false
}, {
"seatNUmber": "J",
"IsAvailable": true
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": true
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": true
}, {
"seatNUmber": "E",
"IsAvailable": true
}, {
"seatNUmber": "F",
"IsAvailable": false
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": true
}, {
"seatNUmber": "J",
"IsAvailable": true
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": true
}, {
"seatNUmber": "B",
"IsAvailable": true
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": false
}, {
"seatNUmber": "E",
"IsAvailable": true
}, {
"seatNUmber": "F",
"IsAvailable": true
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": true
}, {
"seatNUmber": "J",
"IsAvailable": true
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": true
}, {
"seatNUmber": "B",
"IsAvailable": true
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": false
}, {
"seatNUmber": "E",
"IsAvailable": false
}, {
"seatNUmber": "F",
"IsAvailable": false
}, {
"seatNUmber": "G",
"IsAvailable": false
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": true
}, {
"seatNUmber": "J",
"IsAvailable": true
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": true
}, {
"seatNUmber": "B",
"IsAvailable": false
}, {
"seatNUmber": "C",
"IsAvailable": false
}, {
"seatNUmber": "D",
"IsAvailable": false
}, {
"seatNUmber": "E",
"IsAvailable": true
}, {
"seatNUmber": "F",
"IsAvailable": true
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": true
}, {
"seatNUmber": "J",
"IsAvailable": true
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": true
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": true
}, {
"seatNUmber": "E",
"IsAvailable": true
}, {
"seatNUmber": "F",
"IsAvailable": true
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": false
}, {
"seatNUmber": "I",
"IsAvailable": false
}, {
"seatNUmber": "J",
"IsAvailable": false
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": false
}, {
"seatNUmber": "C",
"IsAvailable": false
}, {
"seatNUmber": "D",
"IsAvailable": true
}, {
"seatNUmber": "E",
"IsAvailable": true
}, {
"seatNUmber": "F",
"IsAvailable": true
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": false
}, {
"seatNUmber": "I",
"IsAvailable": false
}, {
"seatNUmber": "J",
"IsAvailable": false
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": true
}, {
"seatNUmber": "C",
"IsAvailable": false
}, {
"seatNUmber": "D",
"IsAvailable": true
}, {
"seatNUmber": "E",
"IsAvailable": true
}, {
"seatNUmber": "F",
"IsAvailable": false
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": false
}, {
"seatNUmber": "J",
"IsAvailable": true
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": false
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": true
}, {
"seatNUmber": "E",
"IsAvailable": true
}, {
"seatNUmber": "F",
"IsAvailable": false
}, {
"seatNUmber": "G",
"IsAvailable": false
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": true
}, {
"seatNUmber": "J",
"IsAvailable": true
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": false
}, {
"seatNUmber": "C",
"IsAvailable": true
}, {
"seatNUmber": "D",
"IsAvailable": false
}, {
"seatNUmber": "E",
"IsAvailable": false
}, {
"seatNUmber": "F",
"IsAvailable": true
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": true
}, {
"seatNUmber": "J",
"IsAvailable": false
}]
},{
rows: [{
"seatNUmber": "A",
"IsAvailable": false
}, {
"seatNUmber": "B",
"IsAvailable": false
}, {
"seatNUmber": "C",
"IsAvailable": false
}, {
"seatNUmber": "D",
"IsAvailable": true
}, {
"seatNUmber": "E",
"IsAvailable": true
}, {
"seatNUmber": "F",
"IsAvailable": true
}, {
"seatNUmber": "G",
"IsAvailable": true
}, {
"seatNUmber": "H",
"IsAvailable": true
}, {
"seatNUmber": "I",
"IsAvailable": true
}, {
"seatNUmber": "J",
"IsAvailable": true
}]
},]
};
displayResults($("#results"), results1);
displayResults($("#results"), results2);
.table tbody tr > td.success {
background-color: #dff0d8 !important;
}
.table tbody tr > td.error {
background-color: #f2dede !important;
}
.table tbody tr > td.warning {
background-color: #fcf8e3 !important;
}
.table tbody tr > td.info {
background-color: #d9edf7 !important;
}
.table-hover tbody tr:hover > td.success {
background-color: #d0e9c6 !important;
}
.table-hover tbody tr:hover > td.error {
background-color: #ebcccc !important;
}
.table-hover tbody tr:hover > td.warning {
background-color: #faf2cc !important;
}
.table-hover tbody tr:hover > td.info {
background-color: #c4e3f3 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="results"></div>
result
). De hecho, la respuesta de Peter Olson se basa en un cambio similar a la corrección que yo hice, antes incluso de yo hacer la corrección.