如何为JavaScript动态生成的表格添加带点击事件的按钮

1. 修正表格行拼接逻辑，添加操作按钮 #

补全原代码中缺失的HTML标签，在每行末尾新增包含按钮的单元格，同时将当前行的JSON数据通过data-*属性存储在按钮上，方便后续获取：

$(document).ready(function () {
  // 从API获取JSON数据（替换为实际API地址）
  $.getJSON("gfgdetails.json", function (data) {
    var studentRows = "";
    // 遍历数据对象
    $.each(data, function (key, value) {
      // 拼接表格行
      studentRows += "<tr>";
      studentRows += "<td>" + value.GFGUserName + "</td>";
      studentRows += "<td>" + value.NoOfProblems + "</td>";
      studentRows += "<td>" + value.TotalScore + "</td>";
      studentRows += "<td>" + value.Articles + "</td>";
      // 添加操作按钮，将当前行数据转为JSON字符串存入data属性
      studentRows += `<td><button class="row-operation-btn" data-row-data='${JSON.stringify(value)}'>发起请求</button></td>`;
      studentRows += "</tr>";
    });
    // 将拼接好的行插入表格
    $("#table").append(studentRows);
  });

  // 为动态生成的按钮绑定点击事件（事件委托）
  $("#table").on("click", ".row-operation-btn", function() {
    // 从按钮的data属性中解析出当前行数据
    const rowData = JSON.parse($(this).data("row-data"));
    // 发起GET请求，将行数据作为查询参数传递
    $.get("/your-target-api", rowData, function(response) {
      // 请求成功后的处理逻辑，可根据需求修改
      console.log("请求响应:", response);
      alert("请求已发送，响应内容已打印至控制台");
    }).fail(function(jqXHR, textStatus) {
      console.error("请求失败:", textStatus);
      alert("请求失败，请检查控制台信息");
    });
  });
});

2. 关键说明 #

• 动态元素事件绑定：按钮是JS动态生成的，必须用事件委托（$("#table").on("click", ".row-operation-btn", ...)）确保事件能触发，直接绑定静态元素的方法无效。
• 数据存储与解析：通过JSON.stringify(value)将行数据转为字符串存入按钮的data-row-data属性，点击时用JSON.parse()解析回对象，避免直接传递对象导致的格式问题。
• GET请求参数：$.get()的第二个参数会自动将对象转为URL查询参数（例如GFGUserName=xxx&NoOfProblems=yyy），如果需要自定义参数格式，可手动拼接URL或调整参数对象。

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