- <!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>
