`

给表格加间隔行颜色 并且设置选中后的颜色

jstablehtmlcss 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Tablecloth</title>

<!-- paste this code into your webpage -->
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
<!-- end -->

<style>

body{
	margin:0;
	padding:0;
	background:#f1f1f1;
	font:70% Arial, Helvetica, sans-serif; 
	color:#555;
	line-height:150%;
	text-align:left;
}
a{
	text-decoration:none;
	color:#057fac;
}
a:hover{
	text-decoration:none;
	color:#999;
}
h1{
	font-size:140%;
	margin:0 20px;
	line-height:80px;	
}
h2{
	font-size:120%;
}
#container{
	margin:0 auto;
	width:680px;
	background:#fff;
	padding-bottom:20px;
}
#content{margin:0 20px;}
p.sig{	
	margin:0 auto;
	width:680px;
	padding:1em 0;
}
form{
	margin:1em 0;
	padding:.2em 20px;
	background:#eee;
}
</style>

</head>

<body>

<div id="container">

	<div id="content">
<table cellspacing="0" cellpadding="0">
<tr>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td> </td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td> </td>
				<td> </td>
				<td> </td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>																				
		</table>
	</div>
</div>
</body>
</html>

 

table, td{
	font:100% Arial, Helvetica, sans-serif; 
}
table{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:left;padding:.5em;border:1px solid #fff;}
th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
td{background:#e5f1f4;}

/* tablecloth styles */

tr.even td{background:#e5f1f4;}
tr.odd td{background:#f8fbfc;}

th.over, tr.even th.over, tr.odd th.over{background:#4a98af;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{}

td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;}

/* use this if you want to apply different styleing to empty table cells*/
td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}
  
this.tablecloth = function(){
	
	
	var highlightCols = false;
	
	var highlightRows = true;	
	

	var selectable = true;
	

	this.clickAction = function(obj){
		//alert(obj.innerHTML);
		
	};


	
	// END CONFIG (do not edit below this line)
	
	
	var tableover = false;
	this.start = function(){
		var tables = document.getElementsByTagName("table");
		for (var i=0;i<tables.length;i++){
			tables[i].onmouseover = function(){tableover = true};
			tables[i].onmouseout = function(){tableover = false};			
			rows(tables[i]);
		};
	};
	
	this.rows = function(table){
		var css = "";
		var tr = table.getElementsByTagName("tr");
		for (var i=0;i<tr.length;i++){
			css = (css == "odd") ? "even" : "odd";
			tr[i].className = css;
			var arr = new Array();
			for(var j=0;j<tr[i].childNodes.length;j++){				
				if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
			};		
			for (var j=0;j<arr.length;j++){				
				arr[j].row = i;
				arr[j].col = j;
				if(arr[j].innerHTML == "&nbsp;" || arr[j].innerHTML == "") arr[j].className += " empty";					
				arr[j].css = arr[j].className;
				arr[j].onmouseover = function(){
					over(table,this,this.row,this.col);
				};
				arr[j].onmouseout = function(){
					out(table,this,this.row,this.col);
				};
				arr[j].onmousedown = function(){
					down(table,this,this.row,this.col);
				};
				arr[j].onmouseup = function(){
					up(table,this,this.row,this.col);
				};				
				arr[j].onclick = function(){
					click(table,this,this.row,this.col);
				};								
			};
		};
	};
	
	// appyling mouseover state for objects (th or td)
	this.over = function(table,obj,row,col){
		if (!highlightCols && !highlightRows) obj.className = obj.css + " over";  
		if(check1(obj,col)){
			if(highlightCols) highlightCol(table,obj,col);
			if(highlightRows) highlightRow(table,obj,row);		
		};
	};
	// appyling mouseout state for objects (th or td)	
	this.out = function(table,obj,row,col){
		if (!highlightCols && !highlightRows) obj.className = obj.css; 
		unhighlightCol(table,col);
		unhighlightRow(table,row);
	};
	// appyling mousedown state for objects (th or td)	
	this.down = function(table,obj,row,col){
		obj.className = obj.css + " down";  
	};
	// appyling mouseup state for objects (th or td)	
	this.up = function(table,obj,row,col){
		obj.className = obj.css + " over";  
	};	
	// onclick event for objects (th or td)	
	this.click = function(table,obj,row,col){
		if(check1){
			if(selectable) {
				unselect(table);	
				if(highlightCols) highlightCol(table,obj,col,true);
				if(highlightRows) highlightRow(table,obj,row,true);
				document.onclick = unselectAll;
			}
		};
		clickAction(obj); 		
	};		
	
	this.highlightCol = function(table,active,col,sel){
		var css = (typeof(sel) != "undefined") ? "selected" : "over";
		var tr = table.getElementsByTagName("tr");
		for (var i=0;i<tr.length;i++){	
			var arr = new Array();
			for(j=0;j<tr[i].childNodes.length;j++){				
				if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
			};							
			var obj = arr[col];
			if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css; 		
		};
	};
	this.unhighlightCol = function(table,col){
		var tr = table.getElementsByTagName("tr");
		for (var i=0;i<tr.length;i++){
			var arr = new Array();
			for(j=0;j<tr[i].childNodes.length;j++){				
				if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j])
			};				
			var obj = arr[col];
			if(check3(obj)) obj.className = obj.css; 
		};
	};	
	this.highlightRow = function(table,active,row,sel){
		var css = (typeof(sel) != "undefined") ? "selected" : "over";
		var tr = table.getElementsByTagName("tr")[row];		
		for (var i=0;i<tr.childNodes.length;i++){		
			var obj = tr.childNodes[i];
			if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css; 		
		};
	};
	this.unhighlightRow = function(table,row){
		var tr = table.getElementsByTagName("tr")[row];		
		for (var i=0;i<tr.childNodes.length;i++){
			var obj = tr.childNodes[i];			
			if(check3(obj)) obj.className = obj.css; 			
		};
	};
	this.unselect = function(table){
		tr = table.getElementsByTagName("tr")
		for (var i=0;i<tr.length;i++){
			for (var j=0;j<tr[i].childNodes.length;j++){
				var obj = tr[i].childNodes[j];	
				if(obj.className) obj.className = obj.className.replace("selected","");
			};
		};
	};
	this.unselectAll = function(){
		if(!tableover){
			tables = document.getElementsByTagName("table");
			for (var i=0;i<tables.length;i++){
				unselect(tables[i])
			};		
		};
	};	
	this.check1 = function(obj,col){
		return (!(col == 0 && obj.className.indexOf("empty") != -1));
	}
	this.check2 = function(active,obj){
		return (!(active.tagName == "TH" && obj.tagName == "TH")); 
	};
	this.check3 = function(obj){
		return (obj.className) ? (obj.className.indexOf("selected") == -1) : true; 
	};	
	
	start();
	
};

/* script initiates on page load. */
window.onload = tablecloth;

 
  • 大小: 4.7 KB
2
顶
0
踩
分享到：
| wordpress 文件结构
评论
4 楼 guangqiang 2012-02-01  
jellyfish 写道
thanks, working now.

npz cheers gang!
3 楼 jellyfish 2012-01-31  
thanks, working now.
2 楼 guangqiang 2012-01-31  
jellyfish 写道
where is tablecloth/tablecloth.css?

pls check it again ....
1 楼 jellyfish 2012-01-30  
where is tablecloth/tablecloth.css?
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    表格颜色自动隔行变色

    隔行变色的基本原理是通过编程或者设置表格样式，使表格的偶数行或奇数行显示不同的背景颜色。这种色彩的交替使得表格行与行之间产生视觉差异，减轻了阅读时的疲劳感，提高了信息的可读性。 2. 实现方法： - ...

    在word的表格中实现隔行更换背景颜色-WORD应用技巧

    在Word文档中，为了使表格看起来更清晰、更有层次感，有时我们需要对表格的行进行隔行更换背景颜色。在Word 2007中，虽然不像Excel那样直接提供这样的功能，但我们可以通过巧妙地利用Excel表格和其内置的公式来实现...

    gridcontrol隔行变色、焦点行颜色、改变显示值、固定列

    在GridControl中，我们可以在GridView的FocusedRowChanged事件中设置焦点行的颜色： ```csharp private void gridView1_FocusedRowChanged(object sender, DevExpress.XtraGrid.Views.Base....

    excel表格如何加行.doc

    给行或列添加颜色有助于突出显示数据，提高数据可视性。最快捷的方式是利用"条件格式"功能。首先，全选你要应用格式的数据区域，然后在菜单栏中选择"条件格式"，接着选择"新建规则"。在新建规则对话框中，选择"使用...

    excel表格自动保存怎么设置.doc

    该功能可以设置“保存自动恢复信息时间间隔”，在出现异常情况时，可以恢复之前的表格。 在 Excel 2007 中，设置自动保存的步骤是：单击“Office 按钮”，在弹出的“Excel 选项”中选择左边的“保存”，在右边的...

    Javascript高级表格操作

    接着，实现表格间隔行颜色，可以通过CSS来完成。设置一个类，如`.alt-row`，并应用条件性样式。例如，当行的索引为偶数时，为其添加该类。在CSS中，为这个类定义不同的背景色。这可以通过遍历表格的每一行并检查其...

    DataGridView控件设置行样式、单元格样式

    - `AlternatingRowsDefaultCellStyle`：此属性允许你为偶数行设置不同的样式，以创建类似电子表格的视觉效果，如交替行的颜色。 - `DefaultCellStyle.Font`：调整字体大小和类型，例如`DefaultCellStyle.Font = ...

    Flex 颜色渐变条

    6. **皮肤和样式**：使用Flex的皮肤ning系统，自定义颜色渐变条的外观，包括节点的形状、大小、颜色和间隔等。 7. **状态管理**：为了支持不同状态下的颜色渐变条（如禁用状态或选中状态），可以定义多个皮肤状态，...

    excel表格如何截屏.doc

    5. 设置表格阴影间隔效果： 这种技巧有助于提高表格的可读性。选择数据区域，通过“格式”菜单的“条件格式”命令，设定条件公式“=MOD(ROW(),10)=0”，这将每隔10行添加阴影，颜色可自定义。此方法适用于大量数据...

    五彩缤纷数据编辑和修饰表格.ppt

    - **删除信息**：若需删除特定行或列，如魏跃和陈庆杰的信息，可以选中对应行或列后按下键盘上的“Delete”键。 - **调整行高和列宽**：可以通过鼠标移动到行号或列标的间隔处，按住左键拖动来改变行高和列宽，以...

    给多列列表框上色

    5. **实时更新**：如果你需要动态上色，比如根据数据变化调整颜色，可以在数据更新后调用上述步骤，重新设置颜色。这可能涉及到事件结构和条件判断。 6. **优化性能**：如果列表框包含大量数据，频繁的上色操作可能...

    Excel模板4-间隔填充趋势图.zip

    确保数据是连续的，并且在工作表中以表格形式排列。 2. **创建折线图**：选择你的数据，然后在Excel的“插入”选项卡中选择“折线图”。这将创建一个基础的折线图，显示数据随时间的变化。 3. **添加间隔填充**：...

    Word中简单一步建立Excel表格.docx

    4. **调整表格属性**：最后，你可以根据需要调整新插入的表格的属性，比如行高、列宽，或者添加边框、填充颜色等，以达到理想的效果。这在“表格工具”下的“设计”和“布局”选项卡中可以完成。 这种技巧的优势...

    专题资料（2021-2022年）excel表格的基本操作实用技巧大全.doc

    9. **创建重复标题行**：在“文件”&gt;“页面设置”&gt;“工作表”&gt;“打印标题”中，可以设置顶端标题行，使得在多页打印时每页顶部都显示相同的标题。 10. **加权平均设置**：加权平均值是通过总量值除以总数量计算得出...

    WPS表格序号应用技巧

    - **操作步骤**：选中包含起始数字的单元格后，点击“开始”选项卡下的“编辑”组中的“填充”按钮，选择“序列”，在弹出的对话框中设置相应的序列参数，如步长值、终止值等。 - **适用场景**：适用于需要创建特定...

    winfrom 隔行换色

    在表格或列表展示大量数据时，通过改变奇偶行的背景颜色，可以显著提高用户对数据的辨识度。本文将详细讲解如何在WinForms应用程序中实现隔行换色的效果。 首先，你需要创建一个WinForms项目并在窗体上添加一个...

    excel表格如何弄借鉴.pdf

    操作步骤包括选中目标列，通过“格式”-&gt;“条件格式”设置规则，选择“单元格数值”、“大于或等于”和“小于”条件，分别设置字体颜色。 2. **排序**：Excel提供了方便的数据排序功能。若需按照总分降序排列，并在...

    Excel表格实用技巧大全及全部快捷键样本.doc

    8. **标题行重复**：在多页表格中，为了保持表头在每一页都可见，可以在“文件→页面设置→工作表→打印标题”中设置顶端标题行，Excel会自动在每页顶部复制选定的行。 9. **加权平均**：在Excel中，加权平均可以...

    如何用WPS表格制作柏拉图PPT学习教案.pptx

    如果100%的线没有达到顶部，你需要点击图表的空白处，选中全图，然后选择“图表选项”，在次坐标轴中选中“数值（X）轴”，最后在“设置所选内容格式”的“刻度”中将“最大值”改为缺陷项目的总数。 通过以上步骤...

    DBGridEh的用法

    - **定义**: 为偶数行和奇数行设置不同的背景色，增强视觉效果。 - **优势**: 改进了在插入新数据时的显示效果，确保单双行颜色始终正确。 ##### 2.9 OptionEh设置 - **定义**: 控制DBGridEh的行为和外观。 - **...

Magicbox
Global site tag (gtag.js) - Google Analytics