I'm building a table from JSON data using Json2HTML jquery plugin json2html , Here is the current state : http://jsfiddle.net/hamiltonlima/7u8v9wdq/ What I want is compare currentID during the processing so '.active' can be add to the class, any suggestions ?
The html
<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>
The Javascript
var data = [{
'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 currentID = 541;
var transform = {
tag: 'tr',
children: [{
"tag": "td",
"html": "${order}"
}, {
"tag": "td",
"html": "${name}"
}, {
"tag": "td",
"html": "${k}"
}, {
"tag": "td",
"html": "${d}"
}, {
"tag": "td",
"html": "${score}"
}]
};
$('#placar > tbody ').json2html(data, transform);
Searching by the tag #json2html found other question that lead me to the solution : How can I apply differnt styles when transforming data using json2html based on data value?
Just add a function to the class attribute to handle it, each line of the data is available in the function as 'this'
So the is somethig like this ...
class : function(){
if( this.id == currentID ){
return 'info';
} else {
return '';
}
},
The complete example is here : http://jsfiddle.net/hamiltonlima/7u8v9wdq/15/
EDIT
Sadly the replace = true option from json2html didn't work as expected ... I wrote another solution add id for each line, and updating the values. take a look here http://jsfiddle.net/hamiltonlima/oqo9otq0/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.