[英]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.