个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我出于日程安排的目的创建了这个 HTML + JavaScript 表格。它允许我选择表格中的多个单元格并将其输出到 JSON 文件中，并具有一些附加功能。
目前，当我尝试选择多个单元格时，它会正确创建“虚拟”矩形并选择所有需要的单元格。
我想要同样的取消选择，但出于某种原因我看不出问题是什么。
有人有什么想法吗？
这是代码片段。
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.ids = [];
});
app.directive('dragSelect', function ($window, $document) {
return {
scope: {
dragSelectIds: '='
},
controller: function ($scope, $element) {
var cls = 'eng-selected-item';
var startCell = null;
var dragging = false;
var weekdays = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
function mouseUp(el) {
dragging = false;
// Select or deselect the all class switchers
// Make sure that headers are not selected for weekdays
for (var k = 0; k < weekdays.length; k++) {
var count_selected = 0;
for (i = 0; i < 11; i++) {
var id = weekdays[k] + "-" + i;
if (document.getElementById(id).classList.contains(cls)) {
count_selected = count_selected + 1
};
}
if (count_selected === 11) {
var id = weekdays[k] + "-all";
document.getElementById(id).classList.add(cls);
} else {
var id = weekdays[k] + "-all";
document.getElementById(id).classList.remove(cls);
};
}
// Make sure that headers are not selected for hours
for (i = 0; i < 11; i++) {
var count_selected = 0;
for (var k = 0; k < weekdays.length; k++) {
var id = weekdays[k] + "-" + i;
if (document.getElementById(id).classList.contains(cls)) {
count_selected = count_selected + 1
};
}
if (count_selected === 7) {
var id = "hour-" + i;
document.getElementById(id).classList.add(cls);
} else {
var id = "hour-" + i;
document.getElementById(id).classList.remove(cls);
}
}
}
function mouseDown(el) {
dragging = true;
setStartCell(el);
setEndCell(el);
}
function setStartCell(el) {
startCell = el;
}
function mouseEnter(el) { if (!dragging) return; setEndCell(el); }
function setEndCell(el) {
// Code for Monday
var day_of_week = "mon";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 24; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "tue";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "wed";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "thu";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "fri";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 24; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "sat";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "sun";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
// Code for hours
if (el.attr('id').startsWith("hour")) {
var hour = el.attr('id').split("-")[1];
console.log(hour);
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < weekdays.length; i++) {
var id = weekdays[i] + "-" + hour;
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < weekdays.length; i++) {
var id = weekdays[i] + "-" + hour;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
}
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'));
});
}
function rectangleSelect(selector, x1, x2, y1, y2) {
var elements = [];
jQuery(selector).each(function () {
var $this = jQuery(this);
var offset = $this.offset();
var x = offset.left;
var y = offset.top;
var w = $this.width();
var h = $this.height();
if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
// this element fits inside the selection rectangle
elements.push($this.get(0));
}
});
return elements;
}
function cellsBetween(start, end) {
var bounds = { minX: 0, minY: 0, maxX: 0, maxY: 0 };
bounds.minX = $window.Math.min($(start).offset().left, $(end).offset().left);
bounds.minY = $window.Math.min($(start).offset().top, $(end).offset().top);
bounds.maxX = $window.Math.max($(end).offset().left + $(end).width(), $(start).offset().left + $(start).width());
bounds.maxY = $window.Math.max($(end).offset().top + $(end).height(), $(start).offset().top + $(start).height());
var initiallySelectedTds = rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);
for (var i = 0; i < initiallySelectedTds.length; i++) {
if ($(initiallySelectedTds[i]).offset().left < bounds.minX)
bounds.minX = $(initiallySelectedTds[i]).offset().left;
if ($(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width() > bounds.maxX)
bounds.maxX = $(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width();
if ($(initiallySelectedTds[i]).offset().top < bounds.minY)
bounds.minY = $(initiallySelectedTds[i]).offset().top;
if ($(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height() > bounds.maxY)
bounds.maxY = $(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height();
}
return rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);
}
function wrap(fn) {
return function () {
var el = angular.element(this);
$scope.$apply(function () {
fn(el);
});
}
}
$element.delegate('td', 'mousedown', wrap(mouseDown));
$element.delegate('td', 'mouseenter', wrap(mouseEnter));
$document.delegate('body', 'mouseup', wrap(mouseUp));
}
}
});
</script>[drag-select] {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[drag-select] .eng-selected-item {
background: green;
color: white;
}<!DOCTYPE html>
<html ng-app="plunker">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"
data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="col-lg-6">
<table drag-select drag-select-ids="ids" class="table table-responsive table-bordered">
<tr>
<td id="hour">Hours ></td>
<td id="hour-0">00</td>
<td id="hour-1">01</td>
<td id="hour-2">02</td>
<td id="hour-3">03</td>
<td id="hour-4">04</td>
<td id="hour-5">05</td>
<td id="hour-6">06</td>
<td id="hour-7">07</td>
<td id="hour-8">08</td>
<td id="hour-9">09</td>
<td id="hour-10">10</td>
</tr>
<tr>
<td id="mon-all">MON</td>
<td id="mon-0"></td>
<td id="mon-1"></td>
<td id="mon-2"></td>
<td id="mon-3"></td>
<td id="mon-4"></td>
<td id="mon-5"></td>
<td id="mon-6"></td>
<td id="mon-7"></td>
<td id="mon-8"></td>
<td id="mon-9"></td>
<td id="mon-10"></td>
</tr>
<tr>
<td id="tue-all">TUE</td>
<td id="tue-0"></td>
<td id="tue-1"></td>
<td id="tue-2"></td>
<td id="tue-3"></td>
<td id="tue-4"></td>
<td id="tue-5"></td>
<td id="tue-6"></td>
<td id="tue-7"></td>
<td id="tue-8"></td>
<td id="tue-9"></td>
<td id="tue-10"></td>
</tr>
<tr>
<td id="wed-all">WED</td>
<td id="wed-0"></td>
<td id="wed-1"></td>
<td id="wed-2"></td>
<td id="wed-3"></td>
<td id="wed-4"></td>
<td id="wed-5"></td>
<td id="wed-6"></td>
<td id="wed-7"></td>
<td id="wed-8"></td>
<td id="wed-9"></td>
<td id="wed-10"></td>
</tr>
<tr>
<td id="thu-all">THU</td>
<td id="thu-0"></td>
<td id="thu-1"></td>
<td id="thu-2"></td>
<td id="thu-3"></td>
<td id="thu-4"></td>
<td id="thu-5"></td>
<td id="thu-6"></td>
<td id="thu-7"></td>
<td id="thu-8"></td>
<td id="thu-9"></td>
<td id="thu-10"></td>
</tr>
<tr>
<td id="fri-all">FRI</td>
<td id="fri-0"></td>
<td id="fri-1"></td>
<td id="fri-2"></td>
<td id="fri-3"></td>
<td id="fri-4"></td>
<td id="fri-5"></td>
<td id="fri-6"></td>
<td id="fri-7"></td>
<td id="fri-8"></td>
<td id="fri-9"></td>
<td id="fri-10"></td>
</tr>
<tr>
<td id="sat-all">SAT</td>
<td id="sat-0"></td>
<td id="sat-1"></td>
<td id="sat-2"></td>
<td id="sat-3"></td>
<td id="sat-4"></td>
<td id="sat-5"></td>
<td id="sat-6"></td>
<td id="sat-7"></td>
<td id="sat-8"></td>
<td id="sat-9"></td>
<td id="sat-10"></td>
</tr>
<tr>
<td id="sun-all">SUN</td>
<td id="sun-0"></td>
<td id="sun-1"></td>
<td id="sun-2"></td>
<td id="sun-3"></td>
<td id="sun-4"></td>
<td id="sun-5"></td>
<td id="sun-6"></td>
<td id="sun-7"></td>
<td id="sun-8"></td>
<td id="sun-9"></td>
<td id="sun-10"></td>
</tr>
</table>
</div>
</div>
<p>Selected IDs: {{ids | json}}</p>
</body>
</html>更新创建了 GIF，希望能更好地解释它: https://media.giphy.com/media/39yUQuAbdRSmfVfCll/giphy.gif-> 取消选择时，我必须逐个取消选择单元格，而不是取消选择多个单元格。
最佳答案
试试这个片段。我将总结我的更改(您可以将它们视为代码中的注释)
(1) determine if we're removing or adding based on the start cell
您需要根据起始单元格确定是删除集合还是添加集合。
(2) don't return here
您不想在删除单元格时返回，因为我们希望它运行删除范围的代码。
(3) remove or add each element here
这是最重要的变化。在 .each() 函数中，您需要实际删除或添加每个元素到集合中。为了提高可读性，我创建了名为 removeElement 和 addElement 的辅助函数。
我还建议您尝试重构您的代码，因为我看到很多重复的逻辑可以拆分成它们自己的函数。但是为了这个例子，我保持了大部分不变。
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.ids = [];
});
app.directive('dragSelect', function ($window, $document) {
return {
scope: {
dragSelectIds: '='
},
controller: function ($scope, $element) {
var cls = 'eng-selected-item';
var startCell = null;
var isRemoving = false;
var dragging = false;
var weekdays = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];
function mouseUp(el) {
dragging = false;
// Select or deselect the all class switchers
// Make sure that headers are not selected for weekdays
for (var k = 0; k < weekdays.length; k++) {
var count_selected = 0;
for (i = 0; i < 11; i++) {
var id = weekdays[k] + "-" + i;
if (document.getElementById(id).classList.contains(cls)) {
count_selected = count_selected + 1
};
}
if (count_selected === 11) {
var id = weekdays[k] + "-all";
document.getElementById(id).classList.add(cls);
} else {
var id = weekdays[k] + "-all";
document.getElementById(id).classList.remove(cls);
};
}
// Make sure that headers are not selected for hours
for (i = 0; i < 11; i++) {
var count_selected = 0;
for (var k = 0; k < weekdays.length; k++) {
var id = weekdays[k] + "-" + i;
if (document.getElementById(id).classList.contains(cls)) {
count_selected = count_selected + 1
};
}
if (count_selected === 7) {
var id = "hour-" + i;
document.getElementById(id).classList.add(cls);
} else {
var id = "hour-" + i;
document.getElementById(id).classList.remove(cls);
}
}
}
function mouseDown(el) {
dragging = true;
setStartCell(el);
setEndCell(el);
}
function setStartCell(el) {
startCell = el;
// (1) determine if we're removing or adding based on the start cell
isRemoving = el.hasClass(cls);
}
function mouseEnter(el) { if (!dragging) return; setEndCell(el); }
function setEndCell(el) {
// Code for Monday
var day_of_week = "mon";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 24; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "tue";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "wed";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "thu";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "fri";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 24; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "sat";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
var day_of_week = "sun";
if (el.attr('id') === day_of_week + "-all") {
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < 11; i++) {
var id = day_of_week + "-" + i;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
};
// Code for hours
if (el.attr('id').startsWith("hour")) {
var hour = el.attr('id').split("-")[1];
console.log(hour);
// If highlighted true
if (el.hasClass(cls) === true) {
var i;
for (i = 0; i < weekdays.length; i++) {
var id = weekdays[i] + "-" + hour;
document.getElementById(id).classList.remove(cls);
var elIndex = $scope.dragSelectIds.indexOf(id);
$scope.dragSelectIds.splice(elIndex, 1)
};
}
/// If highlighted false
if (el.hasClass(cls) === false) {
var i;
for (i = 0; i < weekdays.length; i++) {
var id = weekdays[i] + "-" + hour;
var elIndex = $scope.dragSelectIds.indexOf(id);
document.getElementById(id).classList.add(cls);
elIndex === -1 && $scope.dragSelectIds.push(id);
};
}
}
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)
// (2) don't return here
// return false;
}
if (!$scope.dragSelectIds) {
$scope.dragSelectIds = [];
}
// (3) remove or add each element here
$(cellsBetween(startCell, el)).each(function(i, elem) {
if (isRemoving)
removeElement($(elem));
else
addElement($(elem));
});
}
function removeElement(el) {
el.removeClass(cls);
var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
elIndex !== -1 && $scope.dragSelectIds.splice(elIndex, 1)
}
function addElement(el) {
el.addClass(cls);
var elIndex = $scope.dragSelectIds.indexOf(el[0].id);
elIndex === -1 && $scope.dragSelectIds.push(el.attr('id'));
}
function rectangleSelect(selector, x1, x2, y1, y2) {
var elements = [];
jQuery(selector).each(function () {
var $this = jQuery(this);
var offset = $this.offset();
var x = offset.left;
var y = offset.top;
var w = $this.width();
var h = $this.height();
if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
// this element fits inside the selection rectangle
elements.push($this.get(0));
}
});
return elements;
}
function allCells(start, end) {
console.log('start, end', start, end);
}
function cellsBetween(start, end) {
var bounds = { minX: 0, minY: 0, maxX: 0, maxY: 0 };
bounds.minX = $window.Math.min($(start).offset().left, $(end).offset().left);
bounds.minY = $window.Math.min($(start).offset().top, $(end).offset().top);
bounds.maxX = $window.Math.max($(end).offset().left + $(end).width(), $(start).offset().left + $(start).width());
bounds.maxY = $window.Math.max($(end).offset().top + $(end).height(), $(start).offset().top + $(start).height());
var initiallySelectedTds = rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);
for (var i = 0; i < initiallySelectedTds.length; i++) {
if ($(initiallySelectedTds[i]).offset().left < bounds.minX)
bounds.minX = $(initiallySelectedTds[i]).offset().left;
if ($(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width() > bounds.maxX)
bounds.maxX = $(initiallySelectedTds[i]).offset().left + $(initiallySelectedTds[i]).width();
if ($(initiallySelectedTds[i]).offset().top < bounds.minY)
bounds.minY = $(initiallySelectedTds[i]).offset().top;
if ($(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height() > bounds.maxY)
bounds.maxY = $(initiallySelectedTds[i]).offset().top + $(initiallySelectedTds[i]).height();
}
return rectangleSelect("td", bounds.minX, bounds.maxX, bounds.minY, bounds.maxY);
}
function wrap(fn) {
return function () {
var el = angular.element(this);
$scope.$apply(function () {
fn(el);
});
}
}
$element.delegate('td', 'mousedown', wrap(mouseDown));
$element.delegate('td', 'mouseenter', wrap(mouseEnter));
$document.delegate('body', 'mouseup', wrap(mouseUp));
}
}
});
</script>[drag-select] {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
[drag-select] .eng-selected-item {
background: green;
color: white;
}<!DOCTYPE html>
<html ng-app="plunker">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"
data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="col-lg-6">
<table drag-select drag-select-ids="ids" class="table table-responsive table-bordered">
<tr>
<td id="hour">Hours ></td>
<td id="hour-0">00</td>
<td id="hour-1">01</td>
<td id="hour-2">02</td>
<td id="hour-3">03</td>
<td id="hour-4">04</td>
<td id="hour-5">05</td>
<td id="hour-6">06</td>
<td id="hour-7">07</td>
<td id="hour-8">08</td>
<td id="hour-9">09</td>
<td id="hour-10">10</td>
</tr>
<tr>
<td id="mon-all">MON</td>
<td id="mon-0"></td>
<td id="mon-1"></td>
<td id="mon-2"></td>
<td id="mon-3"></td>
<td id="mon-4"></td>
<td id="mon-5"></td>
<td id="mon-6"></td>
<td id="mon-7"></td>
<td id="mon-8"></td>
<td id="mon-9"></td>
<td id="mon-10"></td>
</tr>
<tr>
<td id="tue-all">TUE</td>
<td id="tue-0"></td>
<td id="tue-1"></td>
<td id="tue-2"></td>
<td id="tue-3"></td>
<td id="tue-4"></td>
<td id="tue-5"></td>
<td id="tue-6"></td>
<td id="tue-7"></td>
<td id="tue-8"></td>
<td id="tue-9"></td>
<td id="tue-10"></td>
</tr>
<tr>
<td id="wed-all">WED</td>
<td id="wed-0"></td>
<td id="wed-1"></td>
<td id="wed-2"></td>
<td id="wed-3"></td>
<td id="wed-4"></td>
<td id="wed-5"></td>
<td id="wed-6"></td>
<td id="wed-7"></td>
<td id="wed-8"></td>
<td id="wed-9"></td>
<td id="wed-10"></td>
</tr>
<tr>
<td id="thu-all">THU</td>
<td id="thu-0"></td>
<td id="thu-1"></td>
<td id="thu-2"></td>
<td id="thu-3"></td>
<td id="thu-4"></td>
<td id="thu-5"></td>
<td id="thu-6"></td>
<td id="thu-7"></td>
<td id="thu-8"></td>
<td id="thu-9"></td>
<td id="thu-10"></td>
</tr>
<tr>
<td id="fri-all">FRI</td>
<td id="fri-0"></td>
<td id="fri-1"></td>
<td id="fri-2"></td>
<td id="fri-3"></td>
<td id="fri-4"></td>
<td id="fri-5"></td>
<td id="fri-6"></td>
<td id="fri-7"></td>
<td id="fri-8"></td>
<td id="fri-9"></td>
<td id="fri-10"></td>
</tr>
<tr>
<td id="sat-all">SAT</td>
<td id="sat-0"></td>
<td id="sat-1"></td>
<td id="sat-2"></td>
<td id="sat-3"></td>
<td id="sat-4"></td>
<td id="sat-5"></td>
<td id="sat-6"></td>
<td id="sat-7"></td>
<td id="sat-8"></td>
<td id="sat-9"></td>
<td id="sat-10"></td>
</tr>
<tr>
<td id="sun-all">SUN</td>
<td id="sun-0"></td>
<td id="sun-1"></td>
<td id="sun-2"></td>
<td id="sun-3"></td>
<td id="sun-4"></td>
<td id="sun-5"></td>
<td id="sun-6"></td>
<td id="sun-7"></td>
<td id="sun-8"></td>
<td id="sun-9"></td>
<td id="sun-10"></td>
</tr>
</table>
</div>
</div>
<p>Selected IDs: {{ids | json}}</p>
</body>
</html>关于javascript - HTML 表格 - Javascript 选择和取消选择元素(单元格)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53280977/
25
4
0
在开发中的网页上，我在 IE 上遇到此错误 element = $(element); 此代码位于prototype.js 预期对象 如何消除此错误。 更新: 现场也使用了 jQuery。 最佳答
我有两个大小相同的嵌套数组: Array1 =[[1, 2], [], [2, 3]] Array2= [[1, 4], [8, 11], [3, 6]] 我需要将它们合并到一个数组中，如下所示: A
我有一些 jQuery 代码，当单击具有特定 ID 的项目时运行。当 ID 是 的一部分时，它就可以工作。元素，但当它位于 中时则不然元素。为什么会这样呢？我想使用 an，因为如果用户关闭了 Ja
Flex-box 规范 3声明 flex 元素不是 block 容器: A flex item establishes a new formatting context for its content
我遇到了一个意想不到的问题。 HTML JS $(function() { var $divs = $('.myDiv'); // create new div not in
我使用 Bootstrap 和 Ember.js 得到了一个无序列表。每个列表项都是一个显示新帖子的链接，每当您单击该链接时，Ember 都会添加类 active默认情况下。我正在使用 Bootstr
我正在尝试让一个函数正常工作，但运气不佳，所以我想向 Stackoverflow 智囊团提出一个新手问题! 基本上，我有一个表单，并且循环遍历所有元素以查看是否存在自定义数据属性。如果存在，则保持该元
我想映射一个可选数组，删除那些 nil 值，并使用另一个函数映射非 nil 值。 我知道我可以通过使用 compactMap 然后使用常规 map 来实现这一点，但我只想遍历数组一次。 我为此实现了一
我如何定位 li 元素，除非它们出现在 之后元素？换句话说，我想针对步骤而不是注释。 我尝试向 OL 添加一个我想从选择中排除的类，但我想出的代码不起作用。 (顺便说一句，重构 html 不是一种选
Warning 1 The element 'system.webServer' has invalid child element 'rewrite'. List of possible eleme
我正在尝试编写一个脚本，该脚本将遍历 HTML 源并创建 DOM 的 JSON 文件，然后使用 d3.js 在 TreeView 中显示该文件。我遇到的问题是不仅希望显示元素(TITLE、P、LI 等
我有以下 HTML 表单:- Option 1 Option 2
我试图在选定的 HTML 元素之后选择下一个具有类名 slider-value 的 span 元素。我尝试了多种解决方案，但没有一个有效。 我可以通过 id 选择它，但我不希望那样做使代码冗余。 $(
如果电子邮件地址无效，我想在屏幕上显示一条消息“请输入有效的电子邮件地址”。 body 元素的innerHTML 语句工作正常，但我用于p 元素的innerHTML 语句不起作用。 有一次，当我测试它
以下 jQuery 代码调用 ul 元素，查找元素内的前 三个 li 列表项，并隐藏剩余的 li 项目。然后，它附加一个 li 元素，其中显示“显示更多...”，并且在单击时显示之前隐藏的列表项。 (
我问了a question早些时候关于将编辑/删除链接与 h1 元素内联的最佳方法。我能够通过给出的答案实现这一点，但我现在有额外的要求，我需要在 h1 下方显示一个段落并编辑/删除链接。 到目前为止
我使用 MVC 4 和 knockout.js 库版本 2.1.0 显示从服务器检索到的大量文件的表中的以下摘录。 0)"> 正在正确检索数据，
我创建了一个脚本，该脚本在鼠标悬停在父容器上时激活，并且应该将其子元素移离鼠标。我目前已经让它工作了，但是代码的某些部分似乎与 REACT 代码应该是什么样子相矛盾。特别是两个部分。 我在渲染函数中使
我是 JS 新手，正在尝试理解项目 https://github.com/tastejs/todomvc 的代码 请参阅屏幕截图，我尝试对 button X 以及其父元素 div 设置断点，但在这两种
例如，假设有一个带有奇特颜色的标记: Something written here 使用 Visual Studio 2017 和 MVC 5 元素，有没有办法检查和定位当前应用了哪些样式，以及负责它
我是一名优秀的程序员,十分优秀！