html页面:
<table class="table">
<thead>
<tr>
<th><div class="txt change-data cur" data-info="favoriteInfo" data-type="favoriteBrand">综合</div></th>
<th><div class="txt change-data" data-info="favoriteInfo" data-type="favoriteBrandOne">一手</div></th>
<th><div class="txt change-data" data-info="favoriteInfo" data-type="favoriteBrandSec">二手</div></th>
</tr>
</thead>
<tbody id="favoriteInfo">
</tbody>
</table>
css:
.cur{width: 41px; border-bottom: 1px solid #ffffff; padding-bottom: 2px;font-weight: bold}
js:
// 点击按钮切换数据
$('.change-data').on('click', function() {
var info = $(this).data('info');
var type = $(this).data('type');
var memberCode = $('#memberform-memberinfo-membercode').val();
$.get('/member/get-special-like', {'info':info,'type':type,'code':memberCode}, function(res){
console.log(res.data);
if (res.error > 0) {
toast(res.message);
return false;
} else {
var html = '';
var numberArr = ['①','②','③','④','⑤','⑥','⑦','⑧','⑨','⑩'];
$.each(res.data,function(i,n){
html +="<tr><td colspan='3'>"+numberArr[i]+' '+n.brandName+"-"+n.percent+"%</td></tr>";
});
$('#'+info).html(html);
}
}, 'json');
//父节点的兄弟节点的儿子
$(this).parent().siblings().children().removeClass('cur');
$(this).addClass('cur');
})
res.data 打印结果:
渲染效果: