how to highlight on line of the result table using json2html?

Question

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

score 0 · Answer 1 · edited May 23 '17 at 11:57

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/

how to highlight on line of the result table using json2html?

1 Answers1