收集的表格样式

最新推荐文章于 2024-07-14 12:36:02 发布

lvtouyayayaya

最新推荐文章于 2024-07-14 12:36:02 发布

阅读量657

点赞数

文章标签： function table styles css border variables

本文链接：https://blog.csdn.net/lvtouyayayaya/article/details/7004909

版权

tablecloth

Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love :) Try to mouseover or click on a table below.

当用AJAX时候，js的效果显示不出来了

css

/* 

	TableCloth	
	by Alen Grakalic, brought to you by cssglobe.com
	
*/

/* general styles */

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

html中的css

body {
	margin:0;
	padding:0;
	background:#e5f1f4;
	font:90% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
	text-align:left;
	}
	a {
	text-decoration:none;
	color:#057fac;
	}
	a:hover {
	text-decoration:none;
	color:#999;
	}
	h1 {
	font-size:220%;
	margin:0 20px;
	padding-top:1em;
	line-height:1em;
	color:#8bb544;
	font-weight:normal;
	font-family:Tahoma, Trebuchet MS, Arial, Helvetica, sans-serif;
	}
	h2 {
	font-size:170%;
	color:#8bb544;
	font-weight:normal;
	font-family:Tahoma, Trebuchet MS, Arial, Helvetica, sans-serif;
	}
	p.info {
	margin:0 20px;
	font-size:90%;
	color:#999;
	}
	p.floater{
	margin:0;
	position:absolute;
	top:2em;
	right:20px;
	float:left;
	line-height:2em;
	height:2em;
	font-size:120%;
	font-family:Tahoma, Trebuchet MS, Arial, Helvetica, sans-serif;
	}
	p.floater a{
	float:left;
	line-height:2em;
	height:2em;
	padding:0 20px;
	background:#8bb544;
	color:#fff;
	}
	p.floater a:hover{
	background:#4a98af;
	color:#fff;
	}
	code {
	font-size:110%;
	}
	pre {
	margin:1em 0;
	padding:1em 20px;
	line-height:150%;
	background:#e5f1f4;
	border-left:1px solid #a4d5e4;
	}
	table {
	font-size:90%;
	}
	#container {
	margin:0 auto;
	margin-top:2em;
	width:888px;
	background:#fff;
	padding-bottom:20px;
	text-align:left;
	position:relative;
	}
	#content {
	margin:0 20px;
	}
	p.sig {
	margin:0 auto;
	width:888px;
	padding:1em 0;
	text-align:left;
	}

/* 

	Tablecloth 
	written by Alen Grakalic, provided by Css Globe (cssglobe.com)
	please visit http://cssglobe.com/lab/tablecloth/
	
*/

this.tablecloth = function(){
	
	// CONFIG 
	
	// if set to true then mouseover a table cell will highlight entire column (except sibling headings)
	var highlightCols = true;
	
	// if set to true then mouseover a table cell will highlight entire row	(except sibling headings)
	var highlightRows = true;	
	
	// if set to true then click on a table sell will select row or column based on config
	var selectable = true;
	
	// this function is called when 
	// add your own code if you want to add action 
	// function receives object that has been clicked 
	this.clickAction = function(obj){
		//alert(obj.innerHTML);
		
	};

	// END CONFIG (do not edit below this line)

	this.cpanel = function(){
		var form = document.forms[0];
		form.onsubmit = function(){
			highlightCols = form.hc[0].checked;
			highlightRows = form.hr[0].checked;
			selectable = form.s[0].checked;
			unselectAll();
			return false;
		};
	};
	cpanel();

	
	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;

collapsible table

using dom and css

css

body{
	font-family:Arial,Sans-Serif;
	font-size:90%;
	background:#cc9;
}
#boundary{
	background:#f8f8f8;
	padding:2em;
	width:40em;
}
h1{
	font-family:"Trebuchet MS",Sans-serif;
	text-transform:uppercase;
	color:#696;
	font-size:120%;
}

table.footcollapse{
	width:30em;
}
table.footcollapse caption{
	font-size:120%;
	text-transform:uppercase;
	text-align:left;
	padding:.5em 1em;
}
table.footcollapse th{
	text-align:left;
}
table.footcollapse,table.footcollapse th,table.footcollapse th
{
	border:none;
	border-collapse:collapse;	
}
table.footcollapse thead th
{
	width:10em;
	border-style:solid;
	border-width:1px;
	border-color:#cff #69c #69c #cff;
	background:#9cf;
	padding:2px 10px;
}
table.footcollapse tfoot th,
table.footcollapse tfoot td
{
	border-style:solid;
	border-width:1px;
	border-color:#9cf #369 #369 #9cf;
	background:#69c;
	padding:2px 10px;
}
table.footcollapse tbody{
	background:#ddd;
}
table.footcollapse tbody td{
	padding:5px 10px;
	border:1px solid #999;
}
table.footcollapse tbody th{
	padding:2px 10px;
	border:1px solid #999;
	border-left:none;
}
table.footcollapse tbody tr.odd{
	background:#ccc;
}

table.footcollapse tfoot td img{
	border:none;
	vertical-align:bottom;
	padding-left:10px;
	float:right;
}

script

function tablecollapse()
{
	/* Variables */
	var collapseClass='footcollapse';
	var collapsePic='arrow_up.gif';
	var expandPic='arrow_down.gif';
	var initialCollapse=true;

	// loop through all tables
	var t=document.getElementsByTagName('table');
	var checktest= new RegExp("(^|\\s)" + collapseClass + "(\\s|$)");
	for (var i=0;i<t.length;i++)
	{
		// if the table has not the right class, skip it
		if(!checktest.test(t[i].className)){continue;}		

		// make the footer clickable
		t[i].getElementsByTagName('tfoot')[0].οnclick=function()
		{
			// loop through all bodies of this table and show or hide 
			// them
			var tb=this.parentNode.getElementsByTagName('tbody');
			for(var i=0;i<tb.length;i++)
			{
				tb[i].style.display=tb[i].style.display=='none'?'':'none';
			}			
			// change the image accordingly
			var li=this.getElementsByTagName('img')[0];
			li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic;	
		}
		// if the bodies should be collapsed initially, do so
		if(initialCollapse)
		{
			var tb=t[i].getElementsByTagName('tbody');
			for(var j=0;j<tb.length;j++)
			{
				tb[j].style.display='none';
			}			
		}
		// add the image surrounded by a dummy link to allow keyboard 
		// access to the last cell in the footer
		var newa=document.createElement('a');
		newa.href='#';
		newa.οnclick=function(){return false;}
		var newimg=document.createElement('img');
		newimg.src=initialCollapse?expandPic:collapsePic;
		var tf=t[i].getElementsByTagName('tfoot')[0];
		var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1];
		newa.appendChild(newimg);
		lt.insertBefore(newa,lt.firstChild);
	}		
}
// run tablecollapse when the page loads
window.οnlοad=tablecollapse;

a sortable table

itune style

/* ---- ( iTunes CSS ) ---- */
table { 
	font: 80% Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #666666;
	border-top: none;	
}
table a {
	text-decoration: underline;
}
table a:visited {
	text-decoration: none;
}
tr.odd {
	background-color: #ebf3ff;
}
tr a {
	color: #000000;
}
tr:hover a {
	color: #ffffff;
}
tr:hover, tr.odd:hover {
	background-color: #3d80df;
	color: #ffffff;
}
caption {
	height: 45px;
	line-height: 44px;
	color: #60634E;
	font-weight: bold;
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-left: -1px;
	background: #ffffff url(captop.jpg) repeat-x;
	background-position: 50% top;
	border-left: 2px solid #616161;
	border-right: 2px solid #616161;
}
thead th {
	font-size: 105%;
	color: #000;
	background: #ffffff url(tbar.gif) repeat-x;
	height: 33px;
}
thead th:hover {
	background: #ffffff url(tbov.gif) repeat-x;
	
}
tr {
	vertical-align: top;
}
tr,th,td {
	padding: .75em;
}
td {
	border-left: 1px solid #dadada;
}
tfoot tr {
	background: #fff url(bbar.gif) repeat-x;
}
tfoot td, tfoot th{
	color: #000;
	border: 0px;
}

lvtouyayayaya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
收集的表格样式

tableclothTablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. By simply adding 2 lines of code to your html page you will have styled an
复制链接

扫一扫