颜色和尺寸变化的国际象棋棋盘（JS和PHP）

Question

I'm writing a simple chess board in HTML, CSS, JS and PHP. 我正在用HTML，CSS，JS和PHP编写一个简单的棋盘。 I want to add custom color to even and odd squares and a custom dimensions(height and width). 我想将自定义颜色添加到偶数和奇数正方形以及自定义尺寸（高度和宽度）。 I wanted to do it this way, but it doesn't work. 我想用这种方式来做，但是不起作用。 It's my assignment for an upcoming exam, so any help would be appreciated. 这是我即将参加的考试的任务，因此对您的帮助将不胜感激。 Thank you in advance. 先感谢您。

<html> 
  <body>
    Select first color: 
    <select id="mySelect" onChange="changeColor(value);">
      <option value="black">Black</option>
      <option value="blue">Blue</option>
      <option value="yellow">Yellow</option>
      <option value="orange">Orange</option>
    </select>
      <br><br>
    Select second color: 
    <select id="mySelect2" onChange="changeColor2(value);">
      <option value="white">White</option>
      <option value="brown">Brown</option>
      <option value="red">Red</option>
      <option value="purple">Purple</option>
    </select>
      <br><br>
    Dimensions value:
    <input type="number" id="dimensions">
    <button type="button" onClick="changeDim">Hajde</button>
   <table width="270px" cellspacing="0px" cellpadding="0px" border="1px">
      <?php
      for($row=1;$row<=8;$row++)
      {
          echo "<tr>";
          for($col=1;$col<=8;$col++)
          {
          $total=$row+$col;
          if($total%2==0)
          {
          echo "<td id='even'></td>";
          }
          else
          {
          echo "<td id='odd'></td>";
          }
          }
          echo "</tr>";
      }
      ?>
  </table>
      <script>
        function changeColor(color) {
        var x = document.getElementById("mySelect").selectedIndex;
        document.getElementById("par").style.background = color;
        }
        function changeColor2(color) {
        var x = document.getElementById("mySelect2").selectedIndex;
        document.getElementById("par").style.background = color;
        }
        function changeDim() {
        var px = "px";
        var dimension = document.getElementById("dimensions").value + px;
        document.getElementById("even").style.height = dimension;
        document.getElementById("even").style.width = dimension;
        document.getElementById("odd").style.height = dimension; 
        document.getElementById("odd").style.width = dimension;  
        }
      </script>
  </body>
  </html>

Answer 1

I believe you just want to be able to access either the even or odd square. 我相信您只希望能够访问偶数或奇数平方。 You can do this with css if you are only changing styling. 如果仅更改样式，则可以使用CSS进行此操作。

You can do something like this to the table. 您可以在桌子上做类似的事情。 It also will flip to do the even and odd on the row since you said it was for a chess board. 自从您说这是用于国际象棋棋盘以来，它还将翻转以在行上进行偶数和奇数运算。

td {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}
tr:nth-child(odd) td:nth-child(odd){
  background-color: black;
}

tr:nth-child(even) td:nth-child(even){
  background-color: black;
}

Hope this helps. 希望这可以帮助。 Good luck! 祝好运！ quick ex. 快速前 https://jsfiddle.net/1c0b2ff0/5/ https://jsfiddle.net/1c0b2ff0/5/

颜色和尺寸变化的国际象棋棋盘（JS和PHP）

问题描述

1 个解决方案

解决方案1
0

颜色和尺寸变化的国际象棋棋盘（JS和PHP）

问题描述

1 个解决方案

解决方案1 0

解决方案1
0