Как поменять цвет ячеек без рекурсии?
У меня есть таблица которая состоит из 20 ячеек. Каждой ячейки присвоен класс. Белым ячейкам присвоен класс "d", чёрным - "backg". Как сделать так чтобы при щелчке на любой белой ячейке все клетки влево и вправо меняли цвет на серый до тех пор пока не попадётся чёрная ячейка?
Разумеется я хочу сделать это без рекурсии например циклом while. Мне только удалось перекрасить в серый цвет абсолютно все ячейки таблицы которые белые циклом for. Вот мой код:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery.min.js"></script>
<title>Таблица</title>
<style>
table td {width:28px; height:28px;}
</style>
<script>
var cell = 20;
function show()
{
for(var i = 0; i < cell; i++)
{
d = 't_'+(i+1);
if($(document.getElementById('t_'+(i+1))).hasClass("backg"))
{
document.getElementById('t_'+(i+1)).style.background = "black";
}
if($(document.getElementById('t_'+(i+1))).hasClass("d"))
{
document.getElementById('t_'+(i+1)).style.background = "white";
}
document.getElementById(d).addEventListener("mousedown", {handleEvent: click_mouse, ii: i});
}
}
function click_mouse(ii)
{
for(var i = 0; i < cell; i++)
{
if(!$(document.getElementById('t_'+(i+1))).hasClass("backg"))
{
document.getElementById('t_'+(i+1)).style.background = "LightGrey";
}
}
}
</script>
</head>
<body onload="show()">
<table border="1" cellspacing="0">
<tr>
<td id = "t_1" class="d"></td>
<td id = "t_2" class="d"></td>
<td id = "t_3" class="backg"></td>
<td id = "t_4" class="backg"></td>
<td id = "t_5" class="d"></td>
<td id = "t_6" class="d"></td>
<td id = "t_7" class="d"></td>
<td id = "t_8" class="d"></td>
<td id = "t_9" class="d"></td>
<td id = "t_10" class="d"></td>
<td id = "t_11" class="backg"></td>
<td id = "t_12" class="backg"></td>
<td id = "t_13" class="d"></td>
<td id = "t_14" class="d"></td>
<td id = "t_15" class="backg"></td>
<td id = "t_16" class="backg"></td>
<td id = "t_17" class="d"></td>
<td id = "t_18" class="d"></td>
<td id = "t_19" class="d"></td>
<td id = "t_20" class="d"></td>
</tr>
</table>
</body>
</html>
|
Katy93,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>Таблица</title>
<style>
table td {width:28px; height:28px;}
.backg {
background-color: #000000;
}
.d.LightGrey{
background-color: LightGrey;
}
</style>
<script>
$(function() {
$("table").on("click", ".d", function() {
$(this).prevUntil(".backg").addBack().nextUntil(".backg").addBack().addClass("LightGrey");
})
});
</script>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td id = "t_1" class="d"></td>
<td id = "t_2" class="d"></td>
<td id = "t_3" class="backg"></td>
<td id = "t_4" class="backg"></td>
<td id = "t_5" class="d"></td>
<td id = "t_6" class="d"></td>
<td id = "t_7" class="d"></td>
<td id = "t_8" class="d"></td>
<td id = "t_9" class="d"></td>
<td id = "t_10" class="d"></td>
<td id = "t_11" class="backg"></td>
<td id = "t_12" class="backg"></td>
<td id = "t_13" class="d"></td>
<td id = "t_14" class="d"></td>
<td id = "t_15" class="backg"></td>
<td id = "t_16" class="backg"></td>
<td id = "t_17" class="d"></td>
<td id = "t_18" class="d"></td>
<td id = "t_19" class="d"></td>
<td id = "t_20" class="d"></td>
</tr>
</table>
</body>
</html>
|
andSelf() - function has been deprecated, начиная с 1.8, вроде бы, нужно addBack().
|
laimas,
:thanks: заменил |
Katy93,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Таблица</title>
<style>
table td {width:28px; height:28px;}
.backg {
background-color: #000000;
}
.d.LightGrey{
background-color: LightGrey;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('table').addEventListener('click',
({target}) => {
if(target.closest(".d")) {
const cells = [...target.parentNode.cells];
const index = cells.indexOf(target);
for (let i = index , td; td = cells[i]; i++) {
if(td.classList.contains("d")) td.classList.add("LightGrey");
else break;
}
for (let i = index , td; td = cells[i]; i--) {
if(td.classList.contains("d")) td.classList.add("LightGrey");
else break;
}
}
}
);
});
</script>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td id = "t_1" class="d"></td>
<td id = "t_2" class="d"></td>
<td id = "t_3" class="backg"></td>
<td id = "t_4" class="backg"></td>
<td id = "t_5" class="d"></td>
<td id = "t_6" class="d"></td>
<td id = "t_7" class="d"></td>
<td id = "t_8" class="d"></td>
<td id = "t_9" class="d"></td>
<td id = "t_10" class="d"></td>
<td id = "t_11" class="backg"></td>
<td id = "t_12" class="backg"></td>
<td id = "t_13" class="d"></td>
<td id = "t_14" class="d"></td>
<td id = "t_15" class="backg"></td>
<td id = "t_16" class="backg"></td>
<td id = "t_17" class="d"></td>
<td id = "t_18" class="d"></td>
<td id = "t_19" class="d"></td>
<td id = "t_20" class="d"></td>
</tr>
</table>
</body>
</html>
|
Я по другому решила цикл происходит до тех пор пока проверка срабатывает в условии цикла.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery.min.js"></script>
<title>Таблица</title>
<style>
table td {width:28px; height:28px;}
</style>
<script>
var cell = 20;
function show()
{
for(var i = 0; i < cell; i++)
{
d = 't_'+(i+1);
if($(document.getElementById('t_'+(i+1))).hasClass("backg"))
{
document.getElementById('t_'+(i+1)).style.background = "black";
}
if($(document.getElementById('t_'+(i+1))).hasClass("d"))
{
document.getElementById('t_'+(i+1)).style.background = "white";
}
document.getElementById(d).addEventListener("mousedown", {handleEvent: click_mouse, ii: i});
}
}
function click_mouse(ii)
{
i = this.ii+1;
while($(document.getElementById('t_'+i)).hasClass("backg")==false && i > 0)
{
document.getElementById('t_'+i).style.background = "LightGrey";
i--;
}
j = this.ii+1;
while($(document.getElementById('t_'+j)).hasClass("backg")==false && j <= 20)
{
document.getElementById('t_'+j).style.background = "LightGrey";
j++;
}
}
</script>
</head>
<body onload="show()">
<table border="1" cellspacing="0">
<tr>
<td id = "t_1" class="d"></td>
<td id = "t_2" class="d"></td>
<td id = "t_3" class="d"></td>
<td id = "t_4" class="backg"></td>
<td id = "t_5" class="d"></td>
<td id = "t_6" class="d"></td>
<td id = "t_7" class="d"></td>
<td id = "t_8" class="d"></td>
<td id = "t_9" class="d"></td>
<td id = "t_10" class="d"></td>
<td id = "t_11" class="backg"></td>
<td id = "t_12" class="backg"></td>
<td id = "t_13" class="d"></td>
<td id = "t_14" class="d"></td>
<td id = "t_15" class="backg"></td>
<td id = "t_16" class="backg"></td>
<td id = "t_17" class="d"></td>
<td id = "t_18" class="d"></td>
<td id = "t_19" class="d"></td>
<td id = "t_20" class="d"></td>
</tr>
</table>
</body>
</html>
Как при щелчке из группы клеток выявить номер первой клетки. Например при щелчке группа клеток начинается с 3 и до 8, они все меняют цвет как в цикле обозначить третью клетку и занести её например в переменную? |
Цитата:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Таблица</title>
<style>
table td {width:28px; height:28px;}
.backg {
background-color: #000000;
}
.d.red{
background-color: #FF0000;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('table').addEventListener('click',
({target}) => {
if(target.closest(".d")) {
const cells = [...target.parentNode.cells];
const index = cells.indexOf(target);
let i = index , td;
for (; td = cells[--i];) {
if(!td.classList.contains("d")) {td = cells[++i];break};
}
td.classList.add("red");
alert(i)
}
}
);
});
</script>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td id = "t_1" class="d"></td>
<td id = "t_2" class="d"></td>
<td id = "t_3" class="backg"></td>
<td id = "t_4" class="backg"></td>
<td id = "t_5" class="d"></td>
<td id = "t_6" class="d"></td>
<td id = "t_7" class="d"></td>
<td id = "t_8" class="d"></td>
<td id = "t_9" class="d"></td>
<td id = "t_10" class="d"></td>
<td id = "t_11" class="backg"></td>
<td id = "t_12" class="backg"></td>
<td id = "t_13" class="d"></td>
<td id = "t_14" class="d"></td>
<td id = "t_15" class="backg"></td>
<td id = "t_16" class="backg"></td>
<td id = "t_17" class="d"></td>
<td id = "t_18" class="d"></td>
<td id = "t_19" class="d"></td>
<td id = "t_20" class="d"></td>
</tr>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 23:37. |