zoukankan      html  css  js  c++  java
  • 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);
    					}
    				}
    			});
    		};
    
     
  • 相关阅读:
    noip2018练习总结
    东方CannonBall (概率DP)
    数论
    逆序对
    USACO5.3 校园网Network of Schools(Tarjan缩点)
    USACO09FEB 改造路Revamping Trails(分层图模板)
    Comet OJ模拟赛 Day1
    Tarjan模板
    NOIP 天天爱跑步(树上差分)
    树上差分
  • 原文地址:https://www.cnblogs.com/nuaaydh/p/4319958.html
Copyright © 2011-2022 走看看