首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何使用json2html在结果表的行上突出显示?

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

Stack Overflow用户
提问于 2014-12-30 04:10:56
回答 1查看 243关注 0票数 0

我正在使用JSON数据使用Json2HTML jquery插件json2html构建一个表,这是当前的状态:http://jsfiddle.net/hamiltonlima/7u8v9wdq/我想要的是在处理过程中比较currentID,这样'.active‘就可以添加到类中,有什么建议吗?

这个html

代码语言:javascript
复制
    <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

代码语言: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);
EN

回答 1

Stack Overflow用户

发布于 2014-12-30 04:21:57

通过标签#json2html进行搜索,我发现了另一个将我引向解决方案的问题:How can I apply differnt styles when transforming data using json2html based on data value?

只需在class属性中添加一个函数来处理它,函数中的每一行数据都作为'this‘可用

是这样的.

代码语言:javascript
复制
class : function(){
        if( this.id == currentID ){
            return 'info';
        } else {
            return '';
        }
    },

完整的示例如下:http://jsfiddle.net/hamiltonlima/7u8v9wdq/15/

编辑

遗憾的是,json2html中的replace = true选项没有像预期的那样工作...我编写了另一个解决方案,为每一行添加id,并更新值。看看这里,http://jsfiddle.net/hamiltonlima/oqo9otq0/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27695321

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档