动态创建表格按钮参数传递问题：点击按钮始终获取最后一行数值

你提供的代码能正常添加表格行，但点击每行的「Show Count」按钮时，控制台始终打印最后一行的计数数值，以下是问题原因和解决方法：

原代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <p>Click "add row" to add several new rows, then click "show count"</p>
  <button type="button" onclick="addTr()">add row</button>
  <table id="myTable">
  </table>

  <script>
    function showCount(trCount) {
      console.log("trCount = " + trCount);
    }

    var trCount = 0;

    function addTr() {
      var table = document.getElementById("myTable");
      var tr = table.insertRow(trCount);
      var td0 = tr.insertCell(0);
      td0.innerHTML = (trCount + 1);
      var td1 = tr.insertCell(1);
      td1.innerHTML = '<input type="button" value="Show Count" onclick="showCount(trCount)">';
      trCount++;
    }
  </script>
</body>
</html>

问题原因 #

按钮的onclick="showCount(trCount)"中，trCount是全局变量。每次调用addTr都会递增这个全局变量，当你点击按钮时，trCount已经是最后一次递增后的数值，因此所有按钮都会传入同一个最终值。

解决方法 #

方法一：用闭包保存当前行的计数 #

通过创建局部变量保存当前的trCount值，利用闭包让按钮的点击事件绑定这个固定值：

function showCount(trCount) {
  console.log("trCount = " + trCount);
}

var trCount = 0;

function addTr() {
  var table = document.getElementById("myTable");
  var tr = table.insertRow(trCount);
  // 保存当前行的计数，避免受全局变量后续修改影响
  var currentCount = trCount;
  var td0 = tr.insertCell(0);
  td0.innerHTML = (currentCount + 1);
  var td1 = tr.insertCell(1);
  // 动态创建按钮并绑定点击事件
  var btn = document.createElement('input');
  btn.type = 'button';
  btn.value = 'Show Count';
  btn.onclick = function() {
    showCount(currentCount);
  };
  td1.appendChild(btn);
  trCount++;
}

方法二：用元素的dataset存储计数 #

把当前行的计数存在按钮的自定义数据属性中，点击时读取该属性值：

function showCount(trCount) {
  console.log("trCount = " + trCount);
}

var trCount = 0;

function addTr() {
  var table = document.getElementById("myTable");
  var tr = table.insertRow(trCount);
  var td0 = tr.insertCell(0);
  td0.innerHTML = (trCount + 1);
  var td1 = tr.insertCell(1);
  // 将当前计数存入按钮的data-count属性
  td1.innerHTML = `<input type="button" value="Show Count" data-count="${trCount}" onclick="showCount(this.dataset.count)">`;
  trCount++;
}

方法三：事件委托（推荐） #

不给每个按钮单独绑定事件，而是给表格添加一个全局事件监听器，通过事件冒泡处理点击，适合动态添加大量行的场景：

<!DOCTYPE html>
<html>
<head>
  <style>
    table,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <p>Click "add row" to add several new rows, then click "show count"</p>
  <button type="button" onclick="addTr()">add row</button>
  <table id="myTable">
  </table>

  <script>
    function showCount(trCount) {
      console.log("trCount = " + trCount);
    }

    var trCount = 0;

    function addTr() {
      var table = document.getElementById("myTable");
      var tr = table.insertRow(trCount);
      var td0 = tr.insertCell(0);
      td0.innerHTML = (trCount + 1);
      var td1 = tr.insertCell(1);
      // 按钮不需要绑定onclick
      td1.innerHTML = '<input type="button" value="Show Count">';
      trCount++;
    }

    // 给表格添加事件委托
    document.getElementById('myTable').addEventListener('click', function(e) {
      // 判断点击的是目标按钮
      if (e.target.tagName === 'INPUT' && e.target.value === 'Show Count') {
        // 获取当前行的第一个单元格内容，转换为计数
        var rowCount = parseInt(e.target.closest('tr').cells[0].textContent) - 1;
        showCount(rowCount);
      }
    });
  </script>
</body>
</html>

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