Javascript 捕获表中的多个td元素

我正在执行选择表中单元格的操作

我在这里找到了非常好的解决方案：

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.ids=[]；
});
应用程序指令（'dragSelect'，函数（$window，$document）{
返回{
范围：{
DragSelectId:“=”
},
控制器：函数（$scope$element）{
var cls=‘工程选定项目’；
var startCell=null；
var=false；
功能鼠标（el）{
拖动=假；
}
功能鼠标向下（el）{
拖动=真；
电池（el）；
setEndCell（el）；
}
功能鼠标器（el）{
如果（！拖动）返回；
setEndCell（el）；
}
函数setStartCell（el）{
startCell=el；
}
函数setEndCell（el）{
$scope.dragSelectIds=[]；
$element.find（'td'）.removeClass（cls）；
$（cellsBetween（startCell，el））。每个（函数（）{
var el=角度元素（本）；
el.addClass（cls）；
$scope.dragSelectIds.push（el.attr（'id'））；
});
}
功能矩形选择（选择器，x1，x2，y1，y2）{
var元素=[]；
jQuery（选择器）.each（函数（）{
var$this=jQuery（this）；
var offset=$this.offset（）；
var x=偏移量。左；
var y=offset.top；
var w=$this.width（）；
var h=$this.height（）；
如果（x>=x1&&x=y1&&y只需修改setEndCell函数

function mouseEnter(el) {
    if (!dragging) return;
    setEndCell(el);
  }


  function setEndCell(el) {
    if (el.hasClass(cls)) { // if added then remove on click
      el.removeClass(cls);
      var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
      elIndex !==-1 && $scope.dragSelectIds.splice(elIndex, 1)
      return false;
    }
    if (!$scope.dragSelectIds) {
      $scope.dragSelectIds = [];
    }
    //$element.find('td').removeClass(cls);
    $(cellsBetween(startCell, el)).each(function() {
      var el = angular.element(this);
      el.addClass(cls);
      // change if added, then not to add twice.
      var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
      elIndex ===-1 && $scope.dragSelectIds.push(el.attr('id'));
    });
  }


var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.ids=[]；
});
应用程序指令（'dragSelect'，函数（$window，$document）{
返回{
范围：{
DragSelectId:“=”
},
控制器：函数（$scope$element）{
var cls=‘工程选定项目’；
var startCell=null；
var=false；
功能鼠标（el）{
拖动=假；
}
功能鼠标向下（el）{
拖动=真；
电池（el）；
setEndCell（el）；
}
功能鼠标器（el）{
如果（！拖动）返回；
setEndCell（el）；
}
函数setStartCell（el）{
startCell=el；
}
函数setEndCell（el）{
如果（el.hasClass（cls））{
el.removeClass（cls）；
var elIndex=$scope.dragSelectIds.indexOf（el[0].id）；
elIndex！=-1&&$scope.dragSelectIds.splice（elIndex，1）
返回false；
}
if（！$scope.dragselectId）{
$scope.dragSelectIds=[]；
}
//$element.find（'td'）.removeClass（cls）；
$（cellsBetween（startCell，el））。每个（函数（）{
var el=角度元素（本）；
el.addClass（cls）；
var elIndex=$scope.dragSelectIds.indexOf（el[0].id）；
elIndex==-1&&$scope.dragSelectIds.push（el.attr（'id'））；
});
}
功能矩形选择（选择器，x1，x2，y1，y2）{
var元素=[]；
jQuery（选择器）.each（函数（）{
var$this=jQuery（this）；
var offset=$this.offset（）；
var x=偏移量。左；
var y=offset.top；
var w=$this.width（）；
var h=$this.height（）；
如果（x>=x1&&x=y1&&y bounds.maxX）
bounds.maxX=$（initiallyselectedds[i]）.offset（）.left+$（initiallyselectedds[i]）.width（）；
if（$（initiallyselectedds[i]）.offset（）.topbounds.maxY）
bounds.maxY=$（initiallyselectedds[i]）.offset（）.top+$（initiallyselectedds[i]）.height（）；
}
返回矩形选择（“td”，bounds.minX，bounds.maxX，bounds.minY，bounds.maxY）；
}
函数换行（fn）{
返回函数（）{
var el=角度元素（本）；
$scope.$apply（函数（）{
fn（el）；
});
}
}
$element.delegate（'td'，'mousedown'，wrap（mousedown））；
$element.delegate（'td'，'mouseenter'，wrap（mouseenter））；
$document.delegate（'body'，'mouseup'，wrap（mouseup））；
}
}
})；
[拖动选择]{
光标：指针；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
[拖动选择].eng选定项{
背景：蓝色；
颜色：白色；
}
运输署{
填充：10px；
边框：1px纯色灰色；
}

安古拉斯普朗克
文件。写（“”）；
1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9
1-10
2-1
2-2
2-3
2-4
2-5
2-6
2-7
2-8
2-9
2-10
3-1
3-2
3-3
3-4
3-5
3-6
3-7
3-8
3-9
3-10
4-1
4-2
4-3
4-4
4-5
4-6
4-7
4-8
4-9
4-10
5-1
5-2
5-3
5-4
5-5
5-6
5-7
5-8
5-9
5-10
所选ID:{IDs | json}

到目前为止您尝试了什么？您可以检测到
ctrl单击
我试图将输出存储在变量中，然后在每次鼠标单击时将其传递给函数，但没有成功。我是JavaScript新手，无法真正理解它。选择与矩形一起工作。您可以做什么：on
mouseDown
：如果按住ctrl

键：创建一个新矩形，否则：清除所有矩形。您需要一个数组来存储所有矩形。提供您迄今为止尝试过的代码。Stackoverflow在这里帮助您，而不是解决您的问题。显示您在这方面花费了一些时间…干杯，这正是我想要的