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

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

乔乐共享jQuerytable单元格表格

最终效果图: 

.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);
					}
				}
			});
		};
    时间: 2024-10-12 16:10:22

    jQuery操作表格,table tr td,单元格的相关文章

    css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span class="tdtip">popAddress</span></td> css: td{ position:relative; z-index:2; } td:hover{ z-index:3; background:none; } td .tdtip { di

    jquery实现的统计table表格指定列的单元格值的和

    jquery实现的统计t]able表格指定列的单元格值的和:在一些应用中,表格单元格中存放的都是数字,比如学生的分数,那么就有可能将这些分数做加法运算来统计出总分数,下面就通过代码实例介绍一下如何统计某一列单元格中值的和.代码实例: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http

    汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率. 1.鼠标移动行变色  $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){

    jQuery操作Table tr td方法大全

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率. 1.鼠标移动行变色  $("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){

    jQuery操作表格(table)的常用方法、技巧汇总

    摘录自:http://www.jb51.net/article/48943.htm 虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率 以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 复制代码 代码如下: $('#table1 tr').hover(function(){  

    jquery遍历table tr td内容

    $("#result").find("tr").each(function () { $(this).find("td").each(function () { if ($(this).text().indexOf("惠") > 0) { var m = $(this).text().toString(); $(this).css("width", "165px"); $(this

    [Xcode10 实际操作]五、使用表格-(3)设置UITableView单元格图标

    本文将演示如何给表格行设置图标. 打开资源文件夹[Assets.xcassets], 在资源文件夹中导入两张图片:一张彩色,一张灰色,作为单元格的图标. [+]->[Import]->[Open] 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 1 import UIKit 2 3 //首先添加两个协议. 4 //一个是表格视图的代理协议UITableViewDelegate 5 //另一个是表格视图的数据源协议UITableViewDataSource 6

    [Xcode10 实际操作]五、使用表格-(8)自定义UITableView单元格Accessory样式(附件图标)

    本文将演示如何自定义单元格的附件图标. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 1 import UIKit 2 3 //首先添加两个协议. 4 //一个是表格视图的代理协议UITableViewDelegate 5 //另一个是表格视图的数据源协议UITableViewDataSource 6 class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSou

    javascript如何便利表格中的行和单元格

    javascript如何便利表格中的行和单元格:尽管现在普遍使用div布局来替代表格,这并不说明table是一无是处的,在制作表格类型的结构的时候还是使用table更为有效.在实际应用中有时候需要便利表格中的行和单元格,下面就通过实例简单介绍一下如何实现此功能.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author&quo