js功能-按Ctrl键多选表格行

时间：2022-07-02 14:28:52 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

js功能-按Ctrl键多选表格行
<?xml version="1.0" encoding="ISO-8859-1"?>
	
	<!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-US" lang="en-US">

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title> New Document </title>

#myTable td {
				-moz-user-select: none;
				-webkit-user-select: none;
			}

tr.select { background:#fcc; }
		</style>

// check start & end pos
			function checkPos(el){
				var oTable = $('myTable');
				var startPos = oTable.startPos;
				if( startPos != null){
					var endPos = el.rowIndex;
					if(endPos > startPos){
						endPos ++;
					}else{
						endPos --;
					}
					loopRows(oTable, function(cur){ cur.className = ''; cur.childNodes[0].childNodes[0].checked = false;}); //clear
					loopRows(oTable, function(cur){ cur.className = 'select'; cur.childNodes[0].childNodes[0].checked = true; }, startPos, endPos);
					oTable.startPos = null;
					return;
				}
				oTable.startPos = el.rowIndex;
				el.className = 'select';
			}

// check and select rows
			function chkSelect(e){
				var e = (e || event);
				var el = this;
				if(e.shiftKey){
					checkPos(el);			
				}
				if(e.ctrlKey){
					el.className = (el.className == 'select' ? '' : 'select');
					el.childNodes[0].childNodes[0].checked = (el.className == 'select');
				}
			}

// get rows & do callback
			function loopRows(oTable, callBack, start, end){
				if(!oTable){
					return;
				}
				callBack = callBack || function(){};
				var trs  = oTable.rows;
				var i = start || 0 , l = end || trs.length;
				var flag = i < l;

while(flag ? i < l : i > l ){
					var cur = trs[i];
					try{
						callBack(cur, i);
					}catch(e){ if(e == 'break'){ break; }}
					flag ? i++ : i--;
				}
			}

//init
			function init(){
				var oTable = $('myTable');
				loopRows(oTable, function(cur){ cur.onclick = chkSelect; });
				oTable.startPos = null;
			}

window.onload = init;
		</script>

</head>
	
		<body>

<table cellpadding="0" cellspacing="0" border="1" onselectstart="return false;" width="100%" id="myTable">
			<script type="text/<a href=http://111com.net/js_a/js.html target=_blank >javascript</a>">
				for(var i = 0; i < 100; i++){
					document.write('<tr><td><input type="checkbox" /></td><td>'+i+'</td></tr>');
				}
			</script>
			</table>

</body>
	
	</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js功能-按Ctrl键多选表格行

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程