点击表格行变色，checkbox自动选中(兼容IE和FF)
2008-10-29 12:17
573 查看
<!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=gb2312" />
<title>点击表格行，checkbox自动选中(兼容IE和FF) </title>
<script>
window.onerror = function(sMessage, sUrl, sLine){ //捕捉错误
alert(sMessage + "---------" + sUrl + "-----------" + sLine);
return true;
}
</script>
<script language="JavaScript">
<!--
var Rows = new Array(); //所有选中的行对象
var cols = new Array();//所有选中的列对象
var ShiftStartRow = ""; //Shift多选时存储开始行对象
//选行主函数
function onfocusit(e)
{
var ee=e||window.event;//区别FF和IE
var iRow = e.target || window.event.srcElement;//区别FF和IE
do
{
iRowiRow=iRow.parentNode;//为了兼容FF和IE，所以用parentNode而不用parentElement
}while(iRow.tagName!='TR')//选择行的父节点
//Ctrl多选
if(e.ctrlKey)//当按下ctrl键时执行
{
var j=-1;
for(i=0;i<Rows.length;i++)//
{
if(iRow==Rows[i])//连续点击某一行多次执行该语句
{
j=i;//连续点击某一行后改变j的值，这里值为0
break;
}
}
if(j!=-1)//连续点击某行后执行
{
for(i=j;i<Rows.length-1;i++)//这里为什么减一行呢？因为我们实际才用到5行，而总行数是6，也就是只循环5次
{
Rows[i]=Rows[i+1];//由于j=0的，而我们的有效行数是从1开始的，故而+1
}
RowsRows.length=Rows.length-1;//重新定义行的总数
}
else//没有连续点击某行执行
{
Rows[Rows.length]=iRow;//记录最后一次点击的行
}
ShiftStartRow=iRow;//记录Shift多选时存储开始行对象
}
//Shift多选
else if(e.shiftKey)//当按下shift键时执行
{
if(ShiftStartRow!="")//这个是区分是否执行过ctrl键，如执行过就执行该语句
{
var StartIndex=ShiftStartRow.rowIndex;//记录shift开始行对象，即ctrl键最后一次点击的行
var EndIndex=iRow.rowIndex;//记录shift结束行对象，即鼠标点击当前行
var oTable=iRow.parentNode;//记录当前行号的父节点
Rows.length=0;//初始化行数
if(StartIndex < EndIndex)//当开始行行号小于结束行行号执行该语句
{
for(var i=StartIndex;i<EndIndex+1;i++)
{
Rows.push(oTable.rows[i]);//将以新元素出现的顺序添加行，可以查看push方法
}
}
if(StartIndex>= EndIndex)//当开始行行号大于或等于结束行行号执行该语句
{
for(var i=EndIndex;i<StartIndex+1;i++)
{
Rows.push(oTable.rows[i]);//将以新元素出现的顺序添加行，可以查看push方法
}
}
}
}
else//没有执行过ctrl键，执行该语句
{
Rows.length=1;//初始化行数
Rows[0]=iRow;//把点击当前行作为第一行，以作为连续按shift键使用
ShiftStartRow=iRow;//记录Shift多选时存储开始行对象，以作为连续按shift键使用
}
changeColor(iRow);//执行选中行变色函数
}
//选中行变色
function changeColor(E)
{
for(var i=1;i<E.parentNode.rows.length;i++)//根据当前行的父节点的总行数循环
{
cols= E.parentNode.rows[i].getElementsByTagName('td');//记录行的列数
if(E!=E.parentNode.rows[i]){//判断是否为当前行，如果不是执行该语句
E.parentNode.rows[i].style.backgroundColor="#FFFFFF";//不是当前行的颜色为白色
cols[1].childNodes[0].checked=false;//取消不是当前行的复选框的选种状态
}
}
for(i=0;i<Rows.length;i++)
{
cols= Rows[i].getElementsByTagName('td');//记录行的列数
if(cols[1].childNodes[0].checked){//复选框为选中状态执行该语句
Rows[i].style.backgroundColor="#FFFFFF";
cols[1].childNodes[0].checked=false;
}
else{//复选框为非选中状态执行该语句
Rows[i].style.backgroundColor="#EEEEEE";
cols[1].childNodes[0].checked=true;
}
}
}
function returnfalse()
{
return false;
}
//-->
</script>
</head>
<body>
注意：单击选择行，支持Ctrl、Shift键盘操作
<table border="1" width="100%">
<tr><td colspan="2" onselectstart="return false">-------------</td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>1</td><td><input type="checkbox" name="checkbox" /></td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>2</td><td><input type="checkbox" name="checkbox" /></td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>3</td><td><input type="checkbox" name="checkbox" /></td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>4</td><td><input type="checkbox" name="checkbox" /></td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>5</td><td><input type="checkbox" name="checkbox" /></td></tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击表格行，checkbox自动选中(兼容IE和FF) </title>
<script>
window.onerror = function(sMessage, sUrl, sLine){ //捕捉错误
alert(sMessage + "---------" + sUrl + "-----------" + sLine);
return true;
}
</script>
<script language="JavaScript">
<!--
var Rows = new Array(); //所有选中的行对象
var cols = new Array();//所有选中的列对象
var ShiftStartRow = ""; //Shift多选时存储开始行对象
//选行主函数
function onfocusit(e)
{
var ee=e||window.event;//区别FF和IE
var iRow = e.target || window.event.srcElement;//区别FF和IE
do
{
iRowiRow=iRow.parentNode;//为了兼容FF和IE，所以用parentNode而不用parentElement
}while(iRow.tagName!='TR')//选择行的父节点
//Ctrl多选
if(e.ctrlKey)//当按下ctrl键时执行
{
var j=-1;
for(i=0;i<Rows.length;i++)//
{
if(iRow==Rows[i])//连续点击某一行多次执行该语句
{
j=i;//连续点击某一行后改变j的值，这里值为0
break;
}
}
if(j!=-1)//连续点击某行后执行
{
for(i=j;i<Rows.length-1;i++)//这里为什么减一行呢？因为我们实际才用到5行，而总行数是6，也就是只循环5次
{
Rows[i]=Rows[i+1];//由于j=0的，而我们的有效行数是从1开始的，故而+1
}
RowsRows.length=Rows.length-1;//重新定义行的总数
}
else//没有连续点击某行执行
{
Rows[Rows.length]=iRow;//记录最后一次点击的行
}
ShiftStartRow=iRow;//记录Shift多选时存储开始行对象
}
//Shift多选
else if(e.shiftKey)//当按下shift键时执行
{
if(ShiftStartRow!="")//这个是区分是否执行过ctrl键，如执行过就执行该语句
{
var StartIndex=ShiftStartRow.rowIndex;//记录shift开始行对象，即ctrl键最后一次点击的行
var EndIndex=iRow.rowIndex;//记录shift结束行对象，即鼠标点击当前行
var oTable=iRow.parentNode;//记录当前行号的父节点
Rows.length=0;//初始化行数
if(StartIndex < EndIndex)//当开始行行号小于结束行行号执行该语句
{
for(var i=StartIndex;i<EndIndex+1;i++)
{
Rows.push(oTable.rows[i]);//将以新元素出现的顺序添加行，可以查看push方法
}
}
if(StartIndex>= EndIndex)//当开始行行号大于或等于结束行行号执行该语句
{
for(var i=EndIndex;i<StartIndex+1;i++)
{
Rows.push(oTable.rows[i]);//将以新元素出现的顺序添加行，可以查看push方法
}
}
}
}
else//没有执行过ctrl键，执行该语句
{
Rows.length=1;//初始化行数
Rows[0]=iRow;//把点击当前行作为第一行，以作为连续按shift键使用
ShiftStartRow=iRow;//记录Shift多选时存储开始行对象，以作为连续按shift键使用
}
changeColor(iRow);//执行选中行变色函数
}
//选中行变色
function changeColor(E)
{
for(var i=1;i<E.parentNode.rows.length;i++)//根据当前行的父节点的总行数循环
{
cols= E.parentNode.rows[i].getElementsByTagName('td');//记录行的列数
if(E!=E.parentNode.rows[i]){//判断是否为当前行，如果不是执行该语句
E.parentNode.rows[i].style.backgroundColor="#FFFFFF";//不是当前行的颜色为白色
cols[1].childNodes[0].checked=false;//取消不是当前行的复选框的选种状态
}
}
for(i=0;i<Rows.length;i++)
{
cols= Rows[i].getElementsByTagName('td');//记录行的列数
if(cols[1].childNodes[0].checked){//复选框为选中状态执行该语句
Rows[i].style.backgroundColor="#FFFFFF";
cols[1].childNodes[0].checked=false;
}
else{//复选框为非选中状态执行该语句
Rows[i].style.backgroundColor="#EEEEEE";
cols[1].childNodes[0].checked=true;
}
}
}
function returnfalse()
{
return false;
}
//-->
</script>
</head>
<body>
注意：单击选择行，支持Ctrl、Shift键盘操作
<table border="1" width="100%">
<tr><td colspan="2" onselectstart="return false">-------------</td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>1</td><td><input type="checkbox" name="checkbox" /></td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>2</td><td><input type="checkbox" name="checkbox" /></td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>3</td><td><input type="checkbox" name="checkbox" /></td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>4</td><td><input type="checkbox" name="checkbox" /></td></tr>
<tr onclick="onfocusit(event)" onselectstart="return false"><td>5</td><td><input type="checkbox" name="checkbox" /></td></tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- （兼容ff/ie）td点击背景变色特效
- td点击背景变色特效（兼容ff/ie）
- （兼容ff/ie）td点击背景变色特效
- td点击背景变色特效（兼容ff/ie）
- jquery获取所有checkbox选中值，并串联成字符串(兼容IE8-FF)
- 鼠标移到隔行变色的表格上，有背景变化，并且点击的时候选中复选框和背景色
- 动态增加删除表格行(兼容IE/FF)
- javascript实现动态增加删除表格行(兼容IE/FF)
- jQuery注册表格(table)行(tr)点击选中checkbox事件
- JS + jQuery 实现元素自动滚动到底部，兼容IE、FF、Chrome
- 兼容IE FF的超链接点击无虚线框
- IE下 checkbox、radio等标签的label中的img点击无效（点击不能选中）问题解决
- javascript实现动态增加删除表格行(兼容IE/FF)
- javascript--打开网页自动最大化(兼容IE,ff)
- 解决dedecms编辑器选中图片再点击自动排版时,在ie中会崩溃问题(原因未明)
- 禁止选中文字兼容IE、Chrome、FF等
- CheckBox后面的提示文字和期对齐的实现方法兼容FF，IE，360
- 动态增加删除表格行(兼容IE/FF)
- 使用javaScript控制某一控件的点击事件[兼容IE和FF]
- 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器