jQuery操作表格与单元格
本文导语: 最终效果，如下图： 完整代码： 代码示例: .td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } www. 2013春节聚会收支统计 姓名 吃饭 K...
完整代码：
.td_back_color {
background-color: red;
}
.td_center {
text-align: center;
font-weight:bold;
} www.
2013春节聚会收支统计
姓名
吃饭
KTV
烧烤
支出
应付
周竞成
......
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");
} www.
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);
}
}
});
};
以上分享的jquery实例代码，实现了表格元素table、tr、td的判断与样式操作等，希望对大家有所帮助。
- jQuery_easyUI合并单元格实例(DataGrid 数据表格)
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。