jQuery操作表格,table tr td,单元格

最终效果图:
[img]http://dl.iteye.com/upload/attachment/0080/6368/8ce33d9c-8f59-3070-9d7d-2ff4d8759b85.jpg[/img]

.td_back_color {
background-color: red;
}
.td_center {
text-align: center;
font-weight:bold;
}



<table id="tbl_count">
<caption>2013春节聚会收支统计</caption>
<tr>
<th>姓名</th>
<th>吃饭</th>
<th>KTV</th>
<th>烧烤</th>
<th>支出</th>
<th>应付</th>
</tr>
<tr>
<th>周竞成</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
......
</table>


var data = [ {
picture : "http://ww1.sinaimg.cn/mw690/51baa38egw1dzl6l2hjchj.jpg",
name : "周竞成",
leftTime : "二月五号",
phone : "186****2296",
qq : "",
workedIn : "浙江 杭州",
cost : 200,
project : "吃饭,KTV,烧烤"
}, ........



// 初始化shuju
var init = function() {
var tbl_count = $("#tbl_count tr:gt(0)");
// 吃饭
var meal_text = $("#tbl_count tr:first th:eq(1)").text();
// KTV
var ktv_text = $("#tbl_count tr:first th:eq(2)").text();
// 烧烤
var bbq_text = $("#tbl_count tr:first th:eq(3)").text();

$.each(tbl_count, function(i,v){
var tr_info = tbl_count.eq(i);
for (var i = 0; i < data.length; i++) {
var data_info = data[i];
// 判断姓名相同的
if(data_info.name == tr_info.find("th:first").text()){
if(data_info.project.indexOf(meal_text) != -1){
tr_info.find("td:eq(0)").addClass("td_back_color");
}
if(data_info.project.indexOf(ktv_text) != -1){
tr_info.find("td:eq(1)").addClass("td_back_color");
}
if(data_info.project.indexOf(bbq_text) != -1){
tr_info.find("td:eq(2)").addClass("td_back_color");
}
tr_info.find("td:eq(3)").addClass("td_center").text("¥"+data_info.cost);
}
}
});
};
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值