使用JavaScript实现点击动态表格TD时获取TR与TD索引

嘿，我来帮你搞定这个需求！你的原代码已经能生成9×9的表格，但还没给单元格添加点击事件来获取对应的行列索引。我调整了代码逻辑，用更合理的DOM操作实现需求，还能避免原代码里document.write覆盖整个页面的问题。

下面是修改后的完整代码：

<html>
<head>
    <title>Table Creation</title>
    <script language="javascript" type="text/javascript">
        function createTable() {
            // 获取存放表格的容器，避免覆盖页面原有内容
            const tableContainer = document.getElementById('tableContainer');
            // 清空容器，防止多次点击创建重复表格
            tableContainer.innerHTML = '';
            
            // 创建表格元素
            const table = document.createElement('table');
            table.setAttribute('border', '1'); // 加边框方便区分单元格

            for (var x = 1; x < 10; x++) {
                const row = document.createElement('tr');
                for(var y = 1; y < 10; y++) {
                    const cell = document.createElement('td');
                    // 保留原有的按钮元素
                    const btn = document.createElement('button');
                    btn.textContent = 'index';
                    
                    // 给单元格绑定点击事件，弹出对应的行列索引
                    cell.addEventListener('click', function() {
                        alert(`(${x}, ${y})`);
                    });
                    
                    cell.appendChild(btn);
                    row.appendChild(cell);
                }
                table.appendChild(row);
            }
            // 将表格添加到页面容器中
            tableContainer.appendChild(table);
        }
    </script>
</head>
<body>
    <button onclick="createTable()">Try it</button>
    <!-- 添加id容器，用来存放生成的表格 -->
    <div id="tableContainer"></div>
</body>
</html>

关键修改说明： #

• 替换document.write为DOM操作：原代码用document.write会直接覆盖整个页面，点击"Try it"后原来的按钮会消失。改用createElement和appendChild可以把表格插入到指定div中，保留页面原有元素。
• 绑定单元格点击事件：给每个<td>元素添加click事件，点击时会弹出对应的行索引x（1到9）和列索引y（1到9），完全匹配你的需求。
• 添加表格边框：给表格加上边框，能更清晰地看到每个单元格的范围，不需要的话可以删掉table.setAttribute('border', '1')这行。
• 清空容器：每次点击"Try it"都会先清空容器内容，避免重复创建多个表格。

如果希望只有点击按钮时才触发弹窗，只需要把事件绑定到按钮上即可——把cell.addEventListener('click', ...)改成btn.addEventListener('click', ...)就好啦。

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