JavaScript点击函数如何返回对象？获取表格值并修复obj未定义报错适配AJAX调用

核心错误原因 #

• 变量作用域错误：obj 是定义在tableText函数内部的局部变量，函数外部无法访问，所以会抛出obj未定义的报错
• 执行逻辑顺序错误：你当前的代码是点击Detail按钮后才给表格行绑定点击事件，此时你并未选中任何表格行，tableText函数根本没有执行，自然拿不到对应的值
• 事件绑定时机错误：表格行的选中事件应该在页面加载完成后就绑定，不需要等到点击按钮时才绑定

修正后完整代码 #

HTML代码（和原有代码保持一致即可） #

<button class='btn btn-secondary' onclick='getDetail()'>Detail</button>

JavaScript代码 #

// 全局变量存储选中的表格行数据
let selectedTableData = {};

// 页面加载完成后自动绑定表格行点击事件
window.onload = function() {
  const table = document.getElementById("tableID");
  if (!table) return;
  // 遍历所有行绑定点击事件
  for (let i = 0; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      // 点击行时存储对应数据到全局变量
      const schName = this.childNodes[1].innerHTML;
      const tblName = this.childNodes[2].innerHTML;
      selectedTableData = {'table_name': tblName};
      // 可选：给选中行添加高亮样式，提示用户已选中
      Array.from(table.rows).forEach(row => row.classList.remove('row-active'));
      this.classList.add('row-active');
    };
  }
}

// 按钮点击触发的函数
function getDetail(){
  const myResult = {"db":"postgres"};
  // 校验是否选中了表格行
  if (Object.keys(selectedTableData).length === 0) {
    alert('请先选中一行表格数据后再点击Detail按钮');
    return;
  }
  // 合并两个对象
  const myData = Object.assign({}, myResult, selectedTableData);
  // 此处输出就是你期望的结果：{db: 'postgres', table_name: 'actor'}
  console.log(myData);

  $.ajax({
    // 补充你自己的接口请求地址、请求方式等参数
    url: "你的后端接口地址",
    method: "POST",
    data: myData,
    error:function (xhr, status, error) {
      let err_msg = ''
      for (var prop in xhr.responseJSON) {
        err_msg += prop + ': ' + xhr.responseJSON[prop] + '\n';
      }
      console.log(err_msg);
    },
    success: function(apiRes){
      // 如果需要和接口返回结果合并，直接在这里合并即可
      const finalData = Object.assign({}, myData, apiRes);
      console.log(finalData);
    }
  });
}

可选：新增选中行高亮样式 #

.row-active {
  background-color: #e8f4ff;
}

使用说明 #

1. 页面加载完成后，先点击你要选择的表格行，行会高亮提示已选中
2. 点击Detail按钮，即可正常获取合并后的参数发起请求

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