Question

我应该找到一种方法来将棋盘格模式实施到用于生成表格的函数中。我对如何做到这一点非常执着。我搜索了很多东西，却没有找到任何有用的信息。有人至少可以指出我正确的方向吗？我将发布我的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);
}

Answer 1

您不需要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>

Answer 2

您基本上希望动态设置偶/奇类。归结为将列索引的其余部分除以2，即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>

您也可以非常简单地with CSS执行此操作。

使用Javascript生成类属性的表棋盘模式

2 个答案: