Table Stripes and Row Locking.-(checkbox) - 懒人图库 - 网页素材下载站 - 学会偷懒，并懒出境界是提高工作效率最有效的方法！

显而易见，最高的效率就是对现有材料的最佳利用。学会偷懒，并懒出境界是提高工作效率最有效的方法！

懒人素材目前共33类素材专辑，涵盖了常用的制作素材，即便您是菜鸟，也会在这里学习进步的~

我的电脑 - HTML+CSS - 设计杂谈 - 站长手册 - Google AdSense - Alexa排名 - 懒人教程 - 摄影技巧

平面设计 - WEB设计 - 海报设计 - 艺术设计

广告语录 - 经典创意

您的照片、图片可以印在各类日常生活用品上，制作成自己专属的礼品，无论送给家人、朋友、爱人或自己都更能表达您的心意。

趣味生活 - 先锋数码

网页小图片 - MSN表情 - flashicon - flashbg - 玩转表格 - 焦点图广告图片 - 博客/论坛表情图片 - 韩国像素

懒人动态 - 生活笔记 - 技术文档 - 音乐公园 - 乱七八糟

图蛙现有495个图片分类，共有78534张图片，如果你是网页设计师或平面设计师，亦或者你是图片收藏爱好者，那么图蛙将非常适合你。　››请进

PNG&ICO图标区 - 矢量素材区 - 实用代码区 - 导航菜单区 - 网页小图片 - 模板交流区 - 图片素材区 - 素材求助区 - 原创作品区 - 设计鉴赏区 - 论坛灌水区

首页 >> 懒人素材 >> 实用代码片段 >> 正文

Table Stripes and Row Locking.-(checkbox)

VIEW:

来源：cssrain.cn　作者：不详　

2007-11-16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Table Stripes and Row Locking</title>

<style type="text/css">
body	{background:#fff;}
h1		{font:bold 20px/26px Arial;}
p, li, td	{font:normal 12px/17px Arial;}
table	{border:0;border-collapse:collapse;}
td		{padding:4px;}
th		{font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
tr.odd	{background:#e4dcd9;}
tr.highlight	{background:#BDA9A2;}
tr.selected		{background:#4a1200;color:#fff;}
td+td+td {text-align:right;}
</style>

<script type="text/javascript">

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

function stripeTables() {
	var tables = document.getElementsByTagName("table");
	for (var m=0; m<tables.length; m++) {
		if (tables[m].className == "pickme") {
			var tbodies = tables[m].getElementsByTagName("tbody");
			for (var i=0; i<tbodies.length; i++) {
				var odd = true;
				var rows = tbodies[i].getElementsByTagName("tr");
				for (var j=0; j<rows.length; j++) {
					if (odd == false) {
						odd = true;
					} else {
						addClass(rows[j],"odd");
						odd = false;
					}
				}
			}
		}
	}
}
function highlightRows() {
  if(!document.getElementsByTagName) return false;
  	var tables = document.getElementsByTagName("table");
	for (var m=0; m<tables.length; m++) {
		if (tables[m].className == "pickme") {
			  var tbodies = tables[m].getElementsByTagName("tbody");
			  for (var j=0; j<tbodies.length; j++) {
				 var rows = tbodies[j].getElementsByTagName("tr");
				 for (var i=0; i<rows.length; i++) {
					   rows[i].oldClassName = rows[i].className
					   rows[i].onmouseover = function() {
						  if( this.className.indexOf("selected") == -1)
							 addClass(this,"highlight");
					   }
					   rows[i].onmouseout = function() {
						  if( this.className.indexOf("selected") == -1)
							 this.className = this.oldClassName
					   }
				 }
			  }
		}
	}
}

function selectRowCheckbox(row) {
	var checkbox = row.getElementsByTagName("input")[0];
	if (checkbox.checked == true) {
		checkbox.checked = false;
	} else
	if (checkbox.checked == false) {
		checkbox.checked = true;
	}
}

function lockRow() {
  	var tables = document.getElementsByTagName("table");
	for (var m=0; m<tables.length; m++) {
		if (tables[m].className == "pickme") {
				var tbodies = tables[m].getElementsByTagName("tbody");
				for (var j=0; j<tbodies.length; j++) {
					var rows = tbodies[j].getElementsByTagName("tr");
					for (var i=0; i<rows.length; i++) {
						rows[i].oldClassName = rows[i].className;
						rows[i].onclick = function() {
							if (this.className.indexOf("selected") != -1) {
								this.className = this.oldClassName;
							} else {
								addClass(this,"selected");
							}
							selectRowCheckbox(this);
						}
					}
				}
		}
	}
}

addLoadEvent(stripeTables);
addLoadEvent(highlightRows);
addLoadEvent(lockRow);

function lockRowUsingCheckbox() {
	var tables = document.getElementsByTagName("table");
	for (var m=0; m<tables.length; m++) {
		if (tables[m].className == "pickme") {
			var tbodies = tables[m].getElementsByTagName("tbody");
			for (var j=0; j<tbodies.length; j++) {
				var checkboxes = tbodies[j].getElementsByTagName("input");
				for (var i=0; i<checkboxes.length; i++) {
					checkboxes[i].onclick = function(evt) {
						if (this.parentNode.parentNode.className.indexOf("selected") != -1){
							this.parentNode.parentNode.className = this.parentNode.parentNode.oldClassName;
						} else {
							addClass(this.parentNode.parentNode,"selected");
						}
						if (window.event && !window.event.cancelBubble) {
							window.event.cancelBubble = "true";
						} else {
							evt.stopPropagation();
						}
					}
				}
			}
		}
	}
}
addLoadEvent(lockRowUsingCheckbox);
</script>

</head>
<body>

<h1>Table 2</h1>

<table
	id="striped2"
	class="pickme"
	caption="Top Grossing Movies">
<thead>
<tr>
	<th> </th>
	<th>Category</th>
	<th>Movie</th>
	<th>Gross</th>
</tr>
</thead>
<tbody>

<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice1"
			value="walalala" />
	</td>
 	<td>Domestic</td>
	<td>Titanic</td>
	<td>$600,788,188</td>
</tr>

<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice2"
			value="walalala" />
	</td>
	<td>Adjusted for Inflation</td>
	<td>Gone with the Wind</td>
	<td>$1,329,453,600</td>
</tr>

<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice3"
			value="walalala" />
	</td>
	<td>Worldwide</td>
	<td>Titanic</td>
	<td>$1,845,034,000</td>
</tr>

<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice4"
			value="walalala" />
	</td>
	<td>R-Rating</td>
	<td>The Passion of the Christ</td>
	<td>$370,274,604</td>																																																																																																																																				
</tr>

<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice5"
			value="walalala" />
	</td>
	<td>PG-13 Rating</td>
	<td>Titanic</td>
	<td>$600,788,188</td>
</tr>

<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice6"
			value="walalala" />
	</td>
	<td>PG-Rating</td>
	<td>Star Wars</td>
	<td>$460,998,007</td>

</tr>
<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice7"
			value="walalala" />
	</td>
	<td>G-Rating</td>
	<td>Finding Nemo</td>
	<td>$339,714,978</td>

</tr>
<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice8"
			value="walalala" />
	</td>
	<td>NC-17 Rating</td>
	<td>Showgirls</td>
	<td>$20,350,754</td>

</tr>
<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice9"
			value="walalala" />
	</td>
	<td>Movies that never hit #1</td>
	<td>My Big Fat Greek Wedding</td>
	<td>241,438,208</td>

</tr>
<tr>
	<td>
		<input
			type="checkbox"
			name="tablechoice10"
			value="walalala" />
	</td>
	<td>IMAX</td>
	<td>Everest</td>
	<td>$87,178,599</td>

</tr>
</tbody></table>

</body>
</html>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

转自：http://www.cssrain.cn/

上一篇文章：
下一篇文章：	[关闭窗口]

JS广告代码

+ 站点更新

+ 热门点击

关于本站 - 免责声明 - 友情链接 - 提点建议 - 联系我们 - 链接纠错 - 广告投放

京ICP备08001501号

Copyright © 2006 - 2008 MakeWing Studio™. All rights reserved.