`

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);
					}
				}
			});
		};
  • 大小: 47.4 KB
分享到:
评论

相关推荐

    jQuery实现表格展开与折叠的方法

    本文实例讲述了jQuery实现表格展开与折叠的方法。分享给大家供大家参考。具体分析如下: 这是很人性化的一款特效代码,实现点击其中一个父级,另一个之前打开的父级会自动关闭 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt...

    jquery 动态合并单元格的实现方法

    $('&lt;tr&gt;&lt;td colspan=\&gt;xxxxxx&lt;/td&gt;&lt;/tr&gt;').insertBefore($("TR", tbl_elm).eq(1)) ////table中指定行第N列合并单元格(合并后会多出一列,删除N+1单元格即可) var tds = $("#dgList .TableHeader1").find('td'); tds...

    jQuery实现HTML表格单元格的合并功能

    本文实例讲述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 合并前: 合并后: 具体代码如下: &lt;!DOCTYPE ...

    jquery-gettable:简单的jQuery插件,可轻松获取通过目标单元格的水平线,垂直线或两条线上的表格单元格

    getTable返回一个jQuery对象(或其中的Array),因此您可以对它们执行任何操作。 该表是通过DOM解析的,它是快速,正确的,并且缓存了这些数据。 // Get rows that include target cell. rows = $ ( 'td#target' ...

    JQuery实现可直接编辑的表格

    本文实例讲述了JQuery实现可直接编辑的表格。分享给大家供大家参考。具体分析如下: 功能: 创建一个表格,用户单击某个单元格后,可以直接修改单元格文本。 在编辑状态下,用户可按回车键确认修改,按ESC键撤销修改...

    jquery合并表格中相同文本的相邻单元格

    一、效果 二、代码 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Example&lt;/title&gt;... &lt;table id=process cellpadding=2 cellspacing=0 border=1&gt; &lt;tr&gt; &lt;td&gt;col0&lt;/td&gt; &lt;td&gt;c

    jquery 合并内容相同的单元格(示例代码)

    如下所示: 代码如下: function _w_table_rowspan(_w_table_id,_w_table_colnum)... _w_table_Obj = $(_w_table_id + ” tr td:nth-child(” + _w_table_colnum + “)”); _w_table_Obj.each(function(i){ if(i==0)

    一个可绑定数据源的jQuery数据表格插件

    固定表头 列宽可调整 单击列头可排序 双击单元格可编辑 可绑定数据源 看下效果吧:HTML – 模板代码: 代码如下: &lt;table id=”test”&gt; &lt;tr class=”header”&gt; &lt;td xss=removed sort=’true’&gt; 姓名 &lt;/td&gt; &lt;td xss=...

    jQuery(非HTML5)可编辑表格实现代码

    而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据源代码: HTML代码: 代码如下: &lt;table class=”editableTable”&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Item1&lt;/th&gt; &lt;th&gt;Item2&lt;/th&gt; &lt;th&gt;Item3...

    bootstrap table.js动态填充单元格数据的多种方法

    bootstrap-table.js动态填充table单元格数据,总结了几种方法以适应各种需求,以下就简单介绍两种方法: 方法一:全部自动填充table &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=...

Global site tag (gtag.js) - Google Analytics