如何将数组对象作为动态表格行中函数的参数传递？

你的代码问题出在两个核心点：

1. 引号嵌套冲突：JSON.stringify(obj)生成的字符串包含双引号，直接放到onclick="editT(...)"里会导致HTML语法错误，浏览器会提前截断属性值。
2. 参数类型错误：就算解决引号问题，你在editT里试图用JSON.parse解析一个已经是对象的参数，这会触发报错。

方法一：用DOM API创建元素（推荐） #

这种方法无需拼接HTML字符串，直接创建DOM元素并绑定事件，能直接引用原对象，完全避免字符串转义和语法问题，且更安全。

<html>
     <body>
         <table>
              <tbody id="tblBody">
              </tbody>
         </table>

<script>    
let t = [{a:1, b:2},{a:3, b:4}]
populate(t)

function populate(t) {
    const tbody = document.getElementById('tblBody')
    t.forEach(obj => {
        // 创建表格行
        const tr = document.createElement('tr')

        // 创建a列单元格
        const tdA = document.createElement('td')
        tdA.textContent = obj.a
        tr.appendChild(tdA)

        // 创建b列单元格
        const tdB = document.createElement('td')
        tdB.textContent = obj.b
        tr.appendChild(tdB)

        // 创建按钮列
        const tdBtn = document.createElement('td')
        const editBtn = document.createElement('button')
        editBtn.textContent = 'Edit'
        
        // 直接绑定点击事件，传递原对象
        editBtn.addEventListener('click', () => editT(obj))
        
        tdBtn.appendChild(editBtn)
        tr.appendChild(tdBtn)
        tbody.appendChild(tr)
    })
}

const editT = (obj) => {
    // 直接使用传入的对象，无需解析
    console.log('要编辑的对象：', obj)
    // 这里可编写编辑逻辑，比如填充表单、修改数据等
}
</script>

</body>
</html>

方法二：修正HTML字符串拼接（不推荐） #

如果一定要用innerHTML拼接，必须处理字符串转义，确保引号嵌套正确：

<html>
     <body>
         <table>
              <tbody id="tblBody">
              </tbody>
         </table>

<script>    
let t = [{a:1, b:2},{a:3, b:4}]
populate(t)

function populate(t) {
    const tbody = document.getElementById('tblBody')
    let tableHtml = ''
    t.forEach(obj => {
        // 将对象转为JSON字符串，并转义其中的双引号
        const objStr = JSON.stringify(obj).replace(/"/g, '\\"')
        tableHtml += `
        <tr>
            <td>${obj.a}</td>
            <td>${obj.b}</td>
            <td>
                <button onclick='editT("${objStr}")'>Edit</button>    
            </td>
        </tr>
    `
    })
    tbody.innerHTML = tableHtml
}

const editT = (objStr) => {
    const parsedObj = JSON.parse(objStr)
    console.log('要编辑的对象：', parsedObj)
}
</script>

</body>
</html>

注意事项： #

这种方法需要处理字符串转义，当对象包含特殊字符（如引号、反斜杠）时容易出错，且存在XSS安全风险，仅在特殊场景下使用。

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