如何在不使用全局变量的情况下将jQuery对象作为函数参数传递

• 你尝试将$(this).closest('tr')返回的jQuery对象直接和字符串拼接时，JavaScript会自动调用对象的toString()方法做隐式类型转换，普通对象的toString方法默认返回[object Object]，所以最终生成的行内onclick代码里就会出现这个无效参数，无法正常调用函数。
• 行内onclick属性只能存储字符串形式的可执行代码，本身就不支持直接传递内存中的DOM对象/jQuery对象，这是该写法走不通的本质原因。

方案1：事件委托+数据缓存（推荐） #

完全放弃行内onclick写法，通过模态框缓存目标行数据，统一绑定按钮点击事件，符合前端开发最佳实践：

// 点击按钮触发弹窗
$('.myBtnA').click(function() {
  const targetRow = $(this).closest('tr')
  // 将目标行缓存到模态框的data属性中
  $('#deleteModal').data('targetRow', targetRow)
  showModal()
})

// 统一绑定弹窗内确认按钮的点击事件
$('.myBtnB').click(function() {
  const targetRow = $('#deleteModal').data('targetRow')
  // 执行删除逻辑
  delete(targetRow)
  // 操作完成后清除缓存
  $('#deleteModal').removeData('targetRow')
})

方案2：传递行唯一标识 #

如果必须沿用行内onclick的实现方式，可以给每行增加唯一标识属性，传递标识后再匹配对应行：
首先给所有表格行添加唯一标识：

<tr data-row-id="对应行的唯一业务ID/序号">
  <!-- 行内内容 -->
</tr>

修改点击触发逻辑：

$('.myBtnA').click(function() {
  const rowId = $(this).closest('tr').data('rowId')
  showModal(`delete(${rowId})`)
})

修改delete函数逻辑，通过标识匹配目标行：

function delete(rowId) {
  const targetRow = $(`tr[data-row-id="${rowId}"]`)
  // 执行后续删除操作
}

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