update table with JSON data
by hamiltonlima
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
<p>
<table id="placar" class="table table-condensed table-bordered">
<thead>
<tr>
<th>#</th>
<th>Luchador</th>
<th>K</th>
<th>D</th>
<th>Pontos</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
JavaScript
var currentID = '541';
function updateScore(data) {
var tbody = $("#placar").find('tbody');
console.log(tbody);
for (key in data) {
var one = data[key];
console.log('processando ', one);
var tr = $('#placar > tbody > #' + one.order);
console.log('tr = ', tr);
if (tr.length == 0) {
$('#placar > tbody:last').append('<tr id=' + one.order + '></tr>');
tr = $('#placar > tbody > #' + one.order);
console.log('tr=', tr.length);
tr.append('<td id="order"></td>');
tr.append('<td id="name"></td>');
tr.append('<td id="k"></td>');
tr.append('<td id="d"></td>');
tr.append('<td id="score"></td>');
var orderTd = $('#placar > tbody > #' + one.order + '> #order');
console.log('orderTd=', orderTd.length);
}
if (one.id == currentID) {
tr.addClass("info");
} else {
tr.removeClass("info");
}
$('#placar > tbody > #' + one.order + '> #order').text(one.order);
$('#placar > tbody > #' + one.order + '> #name').text(one.name);
$('#placar > tbody > #' + one.order + '> #k').text(one.k);
$('#placar > tbody > #' + one.order + '> #d').text(one.d);
$('#placar > tbody > #' + one.order + '> #score').text(one.score);
}
}
var table1 = [{
'order': '1',
'name': 'nheco',
'k': '3',
'd': '0',
'score': '121',
'id': '540'
}, {
'order': '2',
'name': 'boingo',
'k': '15',
'd': '3',
'score': '122',
'id': '541'
}, {
'order': '3',
'name': 'Oswaldo',
'k': '0',
'd': '23',
'score': '123',
'id': '542'
}];
var table2 = [{
'order': '1',
'name': 'Orlando',
'k': '3',
'd': '0',
'score': '121',
'id': '540'
}, {
'order': '2',
'name': 'boingo',
'k':...