最终效果图：
简单来看一下其中的主要部分：
html：
.td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; }
css：
2013春节聚会收支统计 姓名 吃饭 ktv 烧烤 支出 应付
周竞成
......

javascript：
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 tbody >tr').length; $(#mytable).attr('rows').length; var rowcount = $('table#mytable:last').index() + 1; //helper function that gets a count of all the rows in a table body $.fn.rowcount = function() { return $('tr', $(this).find('tbody')).length; }; // usage: var rowcount = $('#producttypestable').rowcount(); alert(jquery(#jtklist).find(table).eq(0).find(tr).length);