个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
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/
26
4
0
是否有某种方法可以使用 JPA 或 Hibernate Crtiteria API 来表示这种 SQL？或者我应该将其作为 native 执行吗？ SELECT A.X FROM (SELECT X,
在查询中， select id,name,feature,marks from (....) 我想删除其 id 在另一个 select 语句中存在的那些。 从 (...) 中选择 id 我是 sql
我想响应用户在 select 元素中选择一个项目。然而这个 jQuery: $('#platypusDropDown').select(function () { alert('You sel
这个问题在这里已经有了答案: SQL select only rows with max value on a column [duplicate] (27 个回答) 关闭8年前。 我正在学习 SQL
This question already has answers here: “Notice: Undefined variable”, “Notice: Undefined index”, and
我在 php 脚本中调用 SQL。有时“DE”中没有值，如果是这种情况我想从“EN”中获取值 应该是这样的，但不是这样的 IF (EXISTS (SELECT epf_application_deta
这可能是一个奇怪的问题，但不知道如何研究它。执行以下查询时: SELECT Foo.col1, Foo.col2, Foo.col3 FROM Foo INNER JOIN Bar ON
如何在使用 Camera.DestinationType.FILE_URI. 时在 phonegap camera API 中同时选择或拾取多个图像我能够一次只选择一张图像。我可以使用 this 在
这是一个纯粹的学术问题。这两个陈述实际上是否相同？ IF EXISTS (SELECT TOP 1 1 FROM Table1) SELECT 1 ELSE SELECT 0 相对 IF EXIS
我使用 JSoup 来解析 HTML 响应。我有多个 Div 标签。我必须根据 ID 选择 Div 标签。 我的伪代码是这样的 Document divTag = Jsoup.connect(link
我正在处理一个具有多个选择框的表单。当用户从 selectbox1 中选择一个选项时，我需要 selectbox2 active 的另一个值。同样，当他选择 selectbox2 的另一个值时，我需要
Acme Inc. Christa Woods Charlotte Freeman Jeffrey Walton Ella Hubbard Se
我有一个login.html其中form定义如下: First Initial Plus Last Name : 我的do_authorize如下: "; pri
$.get( 'http://www.ufilme.ro/api/load/maron_online/470', function(data
我有一个下拉列表“磅”、“克”、“千克”和“盎司”。我想要这样一种情况，当我选择 gram 来执行一个函数时，当我在输入字段中输入一个值时，当我选择 pounds 时，我想要另一个函数来执行时我在输入
我有一个 GLSL 着色器，它从输入纹理的 channel 之一(例如 R)读取，然后写入输出纹理中的同一 channel 。该 channel 必须由用户选择。 我现在能想到的就是使用一个 int
我想根据下拉列表中的选定值生成输入文本框。 Options 2 3 4 5 就在这个选择框之后，一些输入字段应该按照选定的数字出现。 最佳答案 我建议您使用响应式(Reac
我是 SQL 新手，我想问一下如何根据首选项和分组选择条目。 +----------+----------+------+ | ENTRY_ID | ROUTE_ID | TYPE | +------
我有以下表结构: CREATE TABLE [dbo].[UTS_USERCLIENT_MAPPING_USER_LIST] ( [MAPPING_ID] [int] IDENTITY(1,1
我在移除不必要的床单时遇到了问题。我查看了不同的论坛并将不同的解决方案混合在一起。 此宏删除工作表(第一张工作表除外)。 Sub wrong() Dim sht As Object Applicati
我是一名优秀的程序员,十分优秀！