সামান্য সংশোধন করে আপনি এটি এটি করতে পারেন:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
#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;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',e=>{
const grid = document.getElementById('grid')
const cells= grid.querySelectorAll('div');
grid.addEventListener('click',function(e){
e.stopPropagation();
cells.forEach( cell=>{
cell.classList.remove('active')
});
event.target.classList.add('active');
if( event.ctrlKey ) {
Array.from(cells).some( cell=>{
cell.classList.add('active')
if( cell==event.target )return true;
})
}
});
});
</script>
</head>
<body>
<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>
</body>
</html>
document.addEventListener('DOMContentLoaded',e=>{
const grid = document.getElementById('grid')
const cells= grid.querySelectorAll('div');
grid.addEventListener('click',function(e){
e.stopPropagation();
cells.forEach( cell=>{
cell.classList.remove('active')
});
e.target.classList.add('active');
if( e.ctrlKey ) {
Array.from(cells).some( cell=>{
cell.classList.add('active')
if( cell==e.target )return true;
})
}
});
});
#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>
এই পিছনে কাজ না করার বিষয়ে মন্তব্য থেকে অনুসরণ করে আমি মূলটিকে সামান্য পুনরায় হ্যাশ করেছি যাতে এটি নির্বাচনের উভয় দিকেই কাজ করে। সম্পাদিত সংস্করণ datasetগুণাবলী ব্যবহার করে - এই ক্ষেত্রে পূর্ণসংখ্যার হিসাবে নির্ধারিত হয়। প্রারম্ভিক কক্ষটি ক্লিক করে একটি রেকর্ড রাখা হয় এবং ctrlকীটি টিপলে যদি ব্যবহারকারী এগিয়ে বা পিছনের দিকটি নির্বাচন করে তা নির্ধারণ করার জন্য একটি সাধারণ গণনা করা হয় - যার ফলে ব্যবহৃত লুপটিকে প্রভাবিত করা হয় এবং এইভাবে সক্রিয় শ্রেণীর অ্যাসাইনমেন্টটি কার্যকর হয়। ভেরিয়েবলগুলি ব্যবহার করে সিএসএসে একটি ছোট্ট টুইট করা কেবল সুবিধার জন্য ছিল ...
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<style>
:root{
--rows:2;
--cols:3;
--size:50px;
}
#grid {
display:grid;
grid-template-columns:repeat(var(--cols),var(--size));
grid-template-rows:repeat(var(--rows),var(--size));
width:calc(var(--size) * var(--cols));
}
.cell {
display: flex;
flex:1;
justify-content: center;
align-items: center;
border: solid 1px #ccc;
margin:1px;
cursor:pointer;
}
.active {
background-color: #80aaff;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',e=>{
let range=[];
const grid = document.getElementById('grid')
const cells = grid.querySelectorAll('div');
const getcell=function(i){
return grid.querySelector('[data-index="'+i+'"]');
}
const clickhandler=function(e){
e.stopPropagation();
range.push( e.target );
/* clear cells of the "active" class */
cells.forEach( cell=>{
cell.classList.remove('active')
});
/* Assign the initially selected cell as "active" */
e.target.classList.add('active');
if( e.ctrlKey ) {
/* Is the user selecting forwards or backwards? */
if( range[0].dataset.index < e.target.dataset.index ){
for( let i=range[0].dataset.index; i < e.target.dataset.index; i++ )getcell(i).classList.add('active')
} else if( range[0].dataset.index == e.target.dataset.index ){
e.target.classList.add('active')
} else {
for( let i=range[0].dataset.index; i > e.target.dataset.index; i-- )getcell(i).classList.add('active')
}
range=[];
}
};
/* assign an integer index to each cell within parent */
cells.forEach( ( cell, index )=>{
cell.dataset.index = index + 1;
});
grid.addEventListener( 'click', clickhandler );
});
</script>
</head>
<body>
<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>
</body>
</html>
document.addEventListener('DOMContentLoaded',e=>{
let range=[];
const grid = document.getElementById('grid')
const cells = grid.querySelectorAll('div');
const getcell=function(i){
return grid.querySelector('[data-index="'+i+'"]');
}
const clickhandler=function(e){
e.stopPropagation();
range.push( e.target );
/* clear cells of the "active" class */
cells.forEach( cell=>{
cell.classList.remove('active')
});
/* Assign the initially selected cell as "active" */
e.target.classList.add('active');
if( e.ctrlKey ) {
/* Is the user selecting forwards or backwards? */
if( range[0].dataset.index < e.target.dataset.index ){
for( let i=range[0].dataset.index; i < e.target.dataset.index; i++ )getcell(i).classList.add('active')
} else if( range[0].dataset.index == e.target.dataset.index ){
e.target.classList.add('active')
} else {
for( let i=range[0].dataset.index; i > e.target.dataset.index; i-- )getcell(i).classList.add('active')
}
range=[];
}
};
/* assign an integer index to each cell within parent */
cells.forEach( ( cell, index )=>{
cell.dataset.index = index + 1;
});
grid.addEventListener( 'click', clickhandler );
});
:root{
--rows:2;
--cols:3;
--size:50px;
}
#grid {
display:grid;
grid-template-columns:repeat(var(--cols),var(--size));
grid-template-rows:repeat(var(--rows),var(--size));
width:calc(var(--size) * var(--cols));
}
.cell {
display: flex;
flex:1;
justify-content: center;
align-items: center;
border: solid 1px #ccc;
margin:1px;
cursor:pointer;
}
.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>