Разделение таблицы линиями на сектора

Katerina23 · July 15, 2018

Я пишу игру судоку на javascript,использую для этого таблицу table. Как разделить ячейки таблицы линиями на сектора как в судоку. Допустим таблица 16x16 ячеек как провести линии каждые четыре ячейки.

Вот код:

<!DOCTYPE HTML>
<html>
    <head>
    <title>Судоку</title>
    
    
       <style>
  	
    .game-board {
  			border: 0;
  			border-spacing: 0;
  			border-collapse: collapse;
        background: #fff;
  		}
      
  		.game-board td {
  			width: 25px;
  			height: 25px;
  			line-height: 20px;
  			text-align: center;
  			border: #9cb0ca 1px solid;
  		}
    </style>
    
</head>
    <body>
    <script>
    var board;
    function Sudoku()
    {
        this.W = 16;
        this.H = 16;
        this.init();
    }
    Sudoku.prototype.init = function()
    {
         
        board = this.createGrid();
        board.cellSpacing = 0;
        board.style = "margin: 0px";
        board.className = 'game-board'; 
        document.body.appendChild(board); 
    }
    Sudoku.prototype.createGrid = function()
    {
       var table = document.createElement('table');
       for (var i = 0; i < this.W; i++) 
          { 
            var r = table.insertRow(i);
            for (var j = 0; j < this.H; j++) 
            {   
                var c = r.insertCell(j); 
                c.num = 0;        
                c.index = [i, j]; 
                c.addEventListener("mousedown", this.clickHandler);
            }
          }
          return table;
    }
   Sudoku.prototype.clickHandler = function(e)
   {
          
   }
   var Sudoku = new Sudoku();
</script>
      
    </body>
</html>

Пример, то что я хочу получить

Edited July 15, 2018 by Katerina23

Katerina23 · July 18, 2018

Если таблицы нельзя разделить линиями, то может это можно сделать как-нибудь с помощью div'ов, т.е. создать таблицу из div контейнеров, потом эту таблицу разделить линиями.

mrnobody · July 18, 2018

Пойдет?

https://codepen.io/corvus-007/pen/BPzGmw?editors=1100

Switch74 · July 18, 2018

http://jsfiddle.net/e54n9ofm/

Katerina23 · July 19, 2018

Проверила оба варианта, работают. Только вот у меня генерирующаяся сетка, то есть может быть 9x9 или 16x16. Можно как-нибудь код ниже добавить в javascript, а вместо 4n подставлять переменную например 3. Ведь в javascript можно указывать имя класса (className) и стили (style), может и это можно как-то записать?

.table tr:nth-child(4n) td {
        border-bottom-width: 4px;
        border-bottom-color: #424242;
      }
      
      .table td:nth-child(4n) {
        border-right-width: 4px;
        border-right-color: #424242;
      }

mrnobody · July 19, 2018

Я добавляю еще класс с размером (беру корень от размера)

board.className = "game-board game-board--size-" + Math.sqrt(this.W);

https://codepen.io/corvus-007/pen/mjOrZK?editors=0110

Switch74 · July 20, 2018

http://jsfiddle.net/e54n9ofm/2/

Sign In

Разделение таблицы линиями на сектора

Question

Katerina23

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Katerina23

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Katerina23

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information