最终效果图:
简单来看一下其中的主要部分:
HTML:
CSS:
2013春节聚会收支统计
姓名
吃饭
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();
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);
}
}
});
};
PS:jQuery获取表格总行数汇总
var rowCount = $('#myTable >tbody >tr').length;
in a table body
$.fn.rowCount = function() {
return $('tr',$(this).find('tbody')).length;
};
$("#myTable").attr('rows').length;
var rowCount = $('table#myTable:last').index() + 1;
//Helper function that gets a count of all the rows
$.fn.rowCount = function() {
return $('tr',$(this).find('tbody')).length;
};
// USAGE:
var rowCount = $('#productTypesTable').rowCount();
alert(jQuery("#jtkList").find("table").eq(0).find("tr").length);