Шаблон таблицы шахматной доски с использованием Javascript для генерации атрибутов класса - PullRequest
Новая
       1

Шаблон таблицы шахматной доски с использованием Javascript для генерации атрибутов класса

0 голосов
/ 15 сентября 2018

Я должен найти способ внедрить шаблон шахматной доски в функцию, используемую для генерации таблицы. Я чрезвычайно застрял на том, как это сделать. Я много искал и не нашел ничего, что могло бы помочь. Может ли кто-нибудь хотя бы указать мне правильное направление, как это сделать? Я опубликую свой HTML, а также JS. 

<!DOCTYPE html>

<html lang="en">
<head>
  <title>Sliding Tile Game</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <script type="text/javascript" src="grid.js"></script>
</head>


</script>
<body onload="createTable()">

<h1>Sliding Tile Puzzle</h1>


<div id="tableDiv"></div>

<h2>Finished Image</h2>
<img src="smilefinal.png" style="height:100px; width:100px;" alt="">


</body>
</html>

А мой js, который создает таблицу, выглядит как 

function createTable(){
var tableString = "<table>",
    body = document.getElementsByTagName('body')
    tableDiv = document.getElementById('tableDiv');
var tclass = "red";

for (row = 0; row < 3; row += 1) {

    tableString += "<tr>";

    for (col = 0; col < 3; col += 1) {

        tableString += "<td>" + "</td>";
    }
    tableString += "</tr>";
}


tableString += "</table>";
document.getElementById("tableDiv").innerHTML = tableString;
tableString.className = tclass;
body.appendChild(tableDiv);
}

Ответы [ 2 ]

0 голосов
/ 15 сентября 2018

Вы в основном хотите установить четные / нечетные классы динамически.Это сводится к тому, чтобы взять оставшуюся часть индекса столбца, разделенную на два, то есть col % 2, и затем установить соответствующий класс: 

function createTable(n){

let tableString = "<table>";

for (row = 0; row < n; row += 1) {

    tableString += "<tr>";

    for (col = 0; col < n; col += 1) {
        tableString += `<td class="${col % 2 === 0 ? 'even' : 'odd'}">(${row}, ${col})</td>`;
    }
    tableString += "</tr>";
}

tableString += "</table>";

const tableDiv = document.getElementById('tableDiv');
tableDiv.innerHTML = tableString;
}
<!DOCTYPE html>

<html lang="en">
<head>
  <title>Sliding Tile Game</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <script type="text/javascript" src="grid.js"></script>
  <style type="text/css">
    table {
      width: 100%;
      font-family: sans-serif;
      color: white;
      font-weight: bold;
      border-collapse: collapse;
      border-spacing: 0;
    }
    td {
      height: 120px;
      padding: 1em;
      border: 2px solid #470000;
    }
    .even {
      background-color: #4787f0;
    }
    .odd {
      background-color: #47f087;
    }
  </style>
</head>


</script>
<body onload="createTable(5)">

<h1>Sliding Tile Puzzle</h1>


<div id="tableDiv"></div>

<h2>Finished Image</h2>
<img src="smilefinal.png" style="height:100px; width:100px;" alt="">


</body>
</html>

Вы также можете сделать это очень просто с помощью CSS .

0 голосов
/ 15 сентября 2018

Вам не нужен JavaScript: 

td {
  background-color: goldenrod;
  width: 30px;
  height: 30px;
  text-align: center;
}

tr:nth-child(2n + 1) > td:nth-child(2n+1) {
  background-color: mediumseagreen;
}

tr:nth-child(2n) > td:nth-child(2n) {
  background-color: mediumseagreen;
}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...