如何用纯JavaScript实现通过第二个表格单元格选色修改单元格背景色

当然可以只用JavaScript实现这个功能！作为编程新手，咱们一步步来拆解，保证你能轻松上手～

首先我先帮你补全完整的可运行HTML结构（你提供的代码不完整，我补充了必要的内容）：

<html lang="en">
<head>
    <style>
        table.first {
            border-collapse: collapse;
            display: inline-block;
            margin-right: 20px; /* 和颜色表格拉开距离，更直观 */
        }
        table.first td {
            border: solid 2px #333;
            width: 60px;
            height: 60px;
            text-align: center;
        }
        table.color-picker {
            border-collapse: collapse;
            display: inline-block;
        }
        table.color-picker td {
            border: solid 1px #ccc;
            width: 40px;
            height: 40px;
            cursor: pointer; /* 鼠标移上去变手型，提示可点击 */
        }
    </style>
</head>
<body>
    <!-- 第一个需要修改颜色的目标表格 -->
    <table class="first">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>单元格3</td>
            <td>单元格4</td>
        </tr>
    </table>

    <!-- 第二个颜色选择表格 -->
    <table class="color-picker">
        <tr>
            <td style="background-color: #ff4444;"></td>
            <td style="background-color: #44ff44;"></td>
            <td style="background-color: #4444ff;"></td>
        </tr>
        <tr>
            <td style="background-color: #ffff44;"></td>
            <td style="background-color: #ff44ff;"></td>
            <td style="background-color: #44ffff;"></td>
        </tr>
    </table>

    <script>
        // 这里放我们的JavaScript代码
    </script>
</body>
</html>

接下来分两种常用场景实现功能，你可以按需选择：

场景1：点击颜色后修改目标表格的所有单元格 #

如果希望选一个颜色，就让第一个表格的所有单元格都变成这个颜色，用这段代码：

// 获取目标表格的所有单元格
const targetCells = document.querySelectorAll('.first td');
// 获取颜色选择表格的所有单元格
const colorCells = document.querySelectorAll('.color-picker td');

// 给每个颜色单元格绑定点击事件
colorCells.forEach(cell => {
    cell.addEventListener('click', function() {
        // 拿到当前点击的颜色单元格的背景色
        const selectedColor = this.style.backgroundColor;
        // 遍历目标表格的每个单元格，设置背景色
        targetCells.forEach(targetCell => {
            targetCell.style.backgroundColor = selectedColor;
        });
    });
});

场景2：先选目标单元格，再选颜色修改单个单元格 #

如果希望先点击第一个表格里的某个单元格，再选颜色修改它的背景色，用这段代码：

// 用来记录用户选中的目标单元格
let selectedTargetCell = null;

// 先给目标表格的单元格绑定点击事件，记录选中的单元格
const targetCells = document.querySelectorAll('.first td');
targetCells.forEach(cell => {
    cell.addEventListener('click', function() {
        // 移除之前选中单元格的高亮（可选，提升交互体验）
        if (selectedTargetCell) {
            selectedTargetCell.style.outline = '';
        }
        // 记录当前选中的单元格
        selectedTargetCell = this;
        // 给选中的单元格加个高亮边框，提示用户选中了它
        selectedTargetCell.style.outline = '3px solid #000';
    });
});

// 给颜色单元格绑定点击事件，修改选中的目标单元格颜色
const colorCells = document.querySelectorAll('.color-picker td');
colorCells.forEach(cell => {
    cell.addEventListener('click', function() {
        if (selectedTargetCell) {
            const selectedColor = this.style.backgroundColor;
            selectedTargetCell.style.backgroundColor = selectedColor;
        } else {
            alert('请先点击第一个表格里的单元格哦！');
        }
    });
});

给新手的小知识点解释 #

• document.querySelectorAll(选择器)：根据CSS选择器找到页面上所有匹配的元素，返回一个元素集合。
• addEventListener('click', 函数)：给元素绑定点击事件，当元素被点击时，就会执行函数里的代码。
• this：在事件函数里，this指的是当前被点击的那个元素（比如你点的颜色单元格）。
• style.backgroundColor：用来读取或设置元素的背景颜色。

把上面的JavaScript代码放进<script>标签里，直接打开HTML文件就能运行啦！

内容的提问来源于stack exchange，提问作者Kokot