greenfield :
I have a table with numbers. When I click on a cell in the table, it toggles active state. I want to select one cell and press crtl and select another cell, and as result cells between first one and second will become active. How to implement it?
codepen https://codepen.io/geeny273/pen/GRJXBQP
<div id="grid">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
const grid = document.getElementById("grid")
grid.onclick = (event) => {
event.stopPropagation();
const { className } = event.target;
if (className.includes('cell')) {
if (className.includes('active')) {
event.target.className = 'cell';
} else {
event.target.className = 'cell active';
}
}
}
It should work like shift highlighting and works in both directions
awran5 :
Try this:
const cells = document.querySelectorAll(".cell");
let lastClicked;
function handleClick(e) {
// Toggle class active
if (e.target.classList.contains("active")) {
e.target.classList.remove("active");
} else {
e.target.classList.add("active");
}
// Check if CTRL key is down and if the clicked cell has aready class active
let inRange = false;
if (e.ctrlKey && this.classList.contains("active")) {
// loop over cells
cells.forEach(cell => {
// check for the first and last cell clicked
if (cell === this || cell === lastClicked) {
// reverse inRange
inRange = !inRange;
}
// If we are in range, add active class
if (inRange) {
cell.classList.add("active");
}
});
}
// Mark last clicked
lastClicked = this;
}
cells.forEach(cell => cell.addEventListener("click", handleClick));
#grid {
display: grid;
grid-template-columns: repeat(3, 50px);
grid-template-rows: repeat(2, 50px);
}
.cell {
display: flex;
justify-content: center;
align-items: center;
border: solid 1px #ccc;
}
.active {
background-color: #80aaff;
}
<div id="grid">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=368337&siteId=1