Форум

Katy93 · #1 (**permalink**) 04.01.2019, 14:15

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

рони · #2 (**permalink**) 04.01.2019, 14:51

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>

laimas · #3 (**permalink**) 04.01.2019, 15:03

andSelf() - function has been deprecated, начиная с 1.8, вроде бы, нужно addBack().

рони · #4 (**permalink**) 04.01.2019, 15:10

laimas,

заменил

рони · #5 (**permalink**) 04.01.2019, 15:21

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>

Katy93 · #6 (**permalink**) 05.01.2019, 09:13

Я по другому решила цикл происходит до тех пор пока проверка срабатывает в условии цикла.

<!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, они все меняют цвет как в цикле обозначить третью клетку и занести её например в переменную?

рони · #7 (**permalink**) 05.01.2019, 10:16

Сообщение от Katy93

Как при щелчке из группы клеток выявить номер первой клетки.

пост #5 строка 27

<!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>

Форум

Справочник

Discord чат

Курсы javascript