У меня есть таблица которая состоит из 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>