js 实现支持crtl与shift键的行多选

来源：互联网发布：手机淘宝直通车是什么编辑：程序博客网时间：2024/05/18 02:08

var lastObj = {}; //选中的当前行对象
var tableObj = {}; //表对象

//按键多选
function onTrClick(o) {
                tableObj = document.getElementById("Table1");
                var len = tableObj.rows.length;
                for (var i = 1; i < len; i++) {
                    tableObj.rows[i].rowNum = i;
                }
       if (event.ctrlKey) {//如果按下了ctrl键
           if (o.style.backgroundColor == "#ffffff") {
               o.style.backgroundColor = '#e3e9f4';
               lastObj = o;
           }else if (o.style.backgroundColor == "#e3e9f4") {
               o.style.backgroundColor = '#ffffff';
           }
       }else if (event.shiftKey) {//如果按下了shift键
           var beginNum, lastNum;
           if (lastObj.rowNum <= o.rowNum) {
               beginNum = lastObj.rowNum;
               lastNum = o.rowNum;
           }else {
               beginNum = o.rowNum;
               lastNum = lastObj.rowNum;
           }
           for (var i = 0; i < len; i++) {
               if (i >= beginNum && i <= lastNum) {
                   tableObj.rows[i].style.backgroundColor = "#e3e9f4";
               }else{
                   tableObj.rows[i].style.backgroundColor = "#ffffff";
                   }
           }
           lastObj = o;
       }else {
           for (var i = 1; i < len; i++) {
               tableObj.rows[i].style.backgroundColor = "#ffffff";
           }
           o.style.backgroundColor = '#e3e9f4';
           lastObj = o;
       }
   }