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

最终效果图: 
技术分享

.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);
					}
				}
			});
		};
 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。