简体   繁体   English

如何使用json2html在结果表的行上突出显示?

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

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 ? 我正在使用Json2HTML jquery插件json2html从JSON数据构建表,这是当前状态: http : //jsfiddle.net/hamiltonlima/7u8v9wdq/我想要的是在处理过程中比较currentID,以便可以添加“ .active”上课,有什么建议吗?

The html 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 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? 通过标签#json2html进行搜索,发现了另一个使我想到该问题的问题: 当使用基于数据值的json2html转换数据时,如何应用不同的样式?

Just add a function to the class attribute to handle it, each line of the data is available in the function as 'this' 只需将一个函数添加到class属性即可处理它,数据的每一行都可以在函数中使用“ 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/ 完整的示例在这里: 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. 不幸的是,json2html中的replace = true选项没有按预期工作。我编写了另一种解决方案,为每行添加id,并更新值。 take a look here http://jsfiddle.net/hamiltonlima/oqo9otq0/ 在这里看看http://jsfiddle.net/hamiltonlima/oqo9otq0/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM