如何使用按钮创建棋盘，每个方块都有定义的x和y值？

<table>
  <tr>
    <td><button id="btn_0_0"></button></td>
    <td><button id="btn_0_1"></button></td>
    <td><button id="btn_0_2"></button></td>
    <!-- 更多按钮 -->
  </tr>
  <tr>
    <td><button id="btn_1_0"></button></td>
    <td><button id="btn_1_1"></button></td>
    <td><button id="btn_1_2"></button></td>
    <!-- 更多按钮 -->
  </tr>
  <!-- 更多行 -->
</table>

table {
  border-collapse: collapse;
}

button {
  width: 50px;
  height: 50px;
  border: none;
  background-color: #eee;
}

button:hover {
  background-color: #ccc;
}

// 获取所有按钮元素
const buttons = document.querySelectorAll('button');

// 为每个按钮添加点击事件
buttons.forEach(button => {
  button.addEventListener('click', () => {
    const id = button.id;
    const [x, y] = id.split('_').slice(1); // 解析出x和y值
    console.log(`点击了方块 (${x}, ${y})`);
  });
});