Question

我想知道是否有任何可能的方法来更改表格单元格的背景颜色，而不是仅使用javascript从第二个表格单元格中选择颜色。如果你能告诉我我将如何高兴。我是新手，所以不要讨厌我。 :) 感谢您的任何反馈！

这应该是这样的：

编辑：我的HTML代码：

<html lang="en">
<head>
</head>
<style>
    table.first {
        border-collapse: collapse;
        display: inline-block;
    }
    table.first td {
        border: solid 2px;
        border-color: black;
        font-size: 3em;
        padding: 1em;
    }
    table.second {
        border-collapse: collapse;
        display: inline-block;
        float: right;
    }
    table.second td {
        border: solid 2px;
        border-color: black;
        font-size: 3em;
        padding: 1em;
    }
</style>
</head>
<body>
<table class="first">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<table class="second">
    <tr>
        <td bgcolor="black"></td>
    </tr>
    <tr>
        <td bgcolor="blue"></td>
    </tr>
    <tr>
        <td bgcolor="red"></td>
    </tr>
    <tr>
        <td bgcolor="yellow"></td>
    </tr>
    <tr>
        <td bgcolor="green"></td>
    </tr>

</table>
<script src="main.js"></script>
</body>
</html>

Answer 1

使用document.querySelectorAll()获取与给定CSS选择器匹配的所有元素的列表。
使用Array.from()将其转换为数组，forEach通过它们进行迭代。
获取所点击bgcolor的{{1}}并将其应用到所有其他表的td。

td

(function() {
  var color;
  Array.from(document.querySelectorAll('.second td')).forEach(td => {
    td.onclick = function() {
      color = this.getAttribute('bgcolor');
    };
  });
  Array.from(document.querySelectorAll('table.first td')).forEach(td => {
    td.onclick = function() {
      if (color) this.setAttribute('bgcolor', color);
    };
  });
  document.getElementById("clear").onclick = function() {
    Array.from(document.querySelectorAll('table.first td')).forEach(td => {
      td.removeAttribute('bgcolor');
    });
  };
})();

table.first {
  border-collapse: collapse;
  display: inline-block;
}

table.first td {
  border: solid 2px;
  border-color: black;
  font-size: 3em;
  padding: 1em;
}

table.second {
  border-collapse: collapse;
  display: inline-block;
  float: right;
}

table.second td {
  border: solid 2px;
  border-color: black;
  font-size: 3em;
  padding: 1em;
}

Javascript更改第二个表格单元格

1 个答案: