如何在点击事件中获取动态生成的乘法表单元格文本节点的值？

嘿，我看了你写的乘法表代码，现在要实现点击每个单元格时显示对应的计算结果对吧？咱们先理清楚原代码里的几个小问题，再给出可行的解决方案。

首先，原代码里有个明显的错误：document.getElementsByTagName("td").innerHTML = m;这行完全没必要，而且getElementsByTagName返回的是所有td的集合，不能直接设置innerHTML，直接删掉就行。另外，你绑定的td.onclick里console.log()是空的，而且因为闭包的问题，直接引用m的话，所有点击事件最后都会拿到循环结束的最后一个m值，这就是典型的闭包陷阱。

下面给你两种解决方案，分别适配不同的场景：

方案1：用立即执行函数（IIFE）捕获循环变量（兼容旧浏览器） #

这种方法适合需要兼容IE等旧浏览器的场景，通过IIFE把每次循环的计算结果、TextNode引用都单独存起来：

<!DOCTYPE html>
<html>
<head>
    <title>乘法表</title>
    <meta charset="utf-8"/>
    <style>
        .tdstyles {
            width: 50px;
            height: 50px;
            text-align: center;
            cursor: pointer; /* 加上鼠标指针提示可点击 */
        }
    </style>
</head>
<body>
    <div id="Holder"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function () {
    var table = document.createElement('table');
    table.border = 1;
    table.cellPadding = 0;
    table.cellSpacing = 0;

    for (var i = 1; i <= 10; i++) {
        var tr = document.createElement('tr');
        for (var j = 1; j <= 10; j++) {
            var m = i * j;
            var td = document.createElement('td');
            var newContent = document.createTextNode(m);
            td.className = "tdstyles";
            td.appendChild(newContent);

            // 用IIFE捕获当前循环的m、TextNode、i、j
            td.onclick = (function(currentResult, currentTextNode, row, col) {
                return function() {
                    // 点击时可以直接使用捕获到的值
                    console.log(`单元格内容：${currentTextNode.textContent}`);
                    alert(`${row} × ${col} = ${currentResult}`);
                }
            })(m, newContent, i, j);

            // 生成随机背景色
            var a = Math.round(Math.random() * 255);
            var b = Math.round(Math.random() * 255);
            var c = Math.round(Math.random() * 255);
            td.style.backgroundColor = `rgb(${a}, ${b}, ${c})`;

            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    Holder.appendChild(table);
};
</script>

方案2：用ES6的let创建块级作用域（现代浏览器推荐） #

如果你的项目只需要支持现代浏览器，用let会让代码更简洁，因为let在循环中会为每次迭代创建独立的块级作用域，避免闭包陷阱：

<!DOCTYPE html>
<html>
<head>
    <title>乘法表</title>
    <meta charset="utf-8"/>
    <style>
        .tdstyles {
            width: 50px;
            height: 50px;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="Holder"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function () {
    var table = document.createElement('table');
    table.border = 1;
    table.cellPadding = 0;
    table.cellSpacing = 0;

    // 把var改成let，创建块级作用域
    for (let i = 1; i <= 10; i++) {
        var tr = document.createElement('tr');
        for (let j = 1; j <= 10; j++) {
            let m = i * j;
            var td = document.createElement('td');
            let newContent = document.createTextNode(m);
            td.className = "tdstyles";
            td.appendChild(newContent);

            // 直接绑定点击事件，变量都是当前迭代的独立值
            td.onclick = function() {
                console.log(`TextNode内容：${newContent.textContent}`);
                alert(`${i} × ${j} = ${m}`);
            };

            // 随机背景色
            let a = Math.round(Math.random() * 255);
            let b = Math.round(Math.random() * 255);
            let c = Math.round(Math.random() * 255);
            td.style.backgroundColor = `rgb(${a}, ${b}, ${c})`;

            tr.appendChild(td);
        }
        table.appendChild(tr);
    }
    Holder.appendChild(table);
};
</script>

关键说明： #

• 保存TextNode引用：不管哪种方案，我们都把创建的newContent（也就是TextNode）保留了下来，点击时可以直接通过它的textContent属性获取内容。
• 闭包陷阱解决：方案1用IIFE把每次循环的变量“快照”保存下来，方案2用let的块级作用域特性，让每个循环迭代的变量都是独立的，避免了所有点击事件共享同一个变量的问题。

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