簡體   English   中英

如何使用json2html在結果表的行上突出顯示?

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

我正在使用Json2HTML jquery插件json2html從JSON數據構建表,這是當前狀態: http : //jsfiddle.net/hamiltonlima/7u8v9wdq/我想要的是在處理過程中比較currentID,以便可以添加“ .active”上課,有什么建議嗎?

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>

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

通過標簽#json2html進行搜索,發現了另一個使我想到該問題的問題: 當使用基於數據值的json2html轉換數據時,如何應用不同的樣式?

只需將一個函數添加到class屬性即可處理它,數據的每一行都可以在函數中使用“ this”

所以是這樣的東西...

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/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM