如何在onblur函数中向updateFinalTermScore(obj1)正确传递obj对象？

• 直接将JavaScript对象拼接到HTML内联事件字符串时，对象会被默认转为[object Object]字符串，最终生成的事件代码为onblur="updateFinalTermScore([object Object]);"，浏览器无法解析该对象，因此函数接收到的参数为undefined。
• 原有代码还存在两个隐藏问题：所有输入框复用同一个id，违反HTML id唯一性规范；预先绑定的分数值是表格渲染时的初始值，无法获取用户修改后的最新输入内容。

优先使用Datatables官方推荐的事件委托方案，避免内联事件的解析问题，同时兼容表格分页、重绘后的事件绑定：

1. 修改列渲染逻辑，去掉内联onblur属性，将需要的参数存储在DOM元素的自定义data属性上，同时去掉重复id，改用class标识输入框：

{
  data: 'FinalScore', 
  title: "Final Score",
  render: function (data, type, full) {
    return `<input class="form-control final-term-score" 
      name="DTFinalaTermMarks" 
      type="text" 
      data-roster-id="${full.RosterID}"
      value="${data}">`;
  }
}

2. 在表格初始化完成后，为表格父元素绑定事件委托，监听输入框失焦事件，直接从DOM元素上读取参数、从输入框读取最新值：

// 注意#yourDataTableId替换为你自己的表格实例的id
$('#yourDataTableId').on('blur', '.final-term-score', function() {
  const currentInput = $(this);
  const rosterId = currentInput.data('roster-id');
  const latestScore = currentInput.val().trim();

  // 此处编写提交到数据库的ajax逻辑即可
  console.log('提交参数：', rosterId, latestScore);
})

如果必须使用内联事件传参的写法，需要先将对象转为可解析的JSON字符串，同时传入当前输入框DOM以获取最新值：

// render函数修改
render: function (data, type, full) {
  const param = { ros: full.RosterID };
  // 转义双引号避免HTML属性解析错误
  const paramStr = JSON.stringify(param).replace(/"/g, '"');
  return `<input class="form-control" 
    name="DTFinalaTermMarks" 
    type="text" 
    onblur="updateFinalTermScore(${paramStr}, this)" 
    value="${data}">`;
}

// 事件处理函数修改
function updateFinalTermScore(param, inputEl) {
  const rosterId = param.ros;
  const latestScore = inputEl.value.trim();
  // 后续数据库提交逻辑
}

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