如何将一个数组的每一个object作为参数传给一行动态表中调用的一个function？
[英]How to set each object of an array as a parameter to a function called in a row of dynamic table?
问题描述
<html>
<body>
<table>
<tbody id="tblBody">
</tbody>
</table>
<script>
let t = [{a:1, b:2},{a:3, b:4}]
populate(t)
function populate(t) {
let tbody = document.getElementById('tblBody')
let tableHtml = ''
t.forEach(obj => {
tableHtml += `
<tr>
<td>${obj.a}</td>
<td>${obj.b}</td>
<td>
<button onclick= "editT(${JSON.stringify(obj)})">Edit</button>
</td>
</tr>
`
});
tbody.innerHTML = tableHtml
}
const editT = (obj) => {
let parsedObj = JSON.parse(obj)
console.log(parsedObj)
}
</script>
</body>
</html>
But I am unable to set obj as a parameter of function editT().
但是我无法将 obj 设置为 function editT() 的参数。 Is there any way to set object as parameter so that each object can be edited by clicking button in a dynamic table.有什么方法可以将 object 设置为参数，以便可以通过单击动态表中的按钮来编辑每个 object。 Actual object has many key value pairs.实际 object 有很多键值对。
1 个解决方案
解决方案1
1 2022-11-25 17:05:42
One way to do it is to pass the object (stringified) index to the onclick function.一种方法是将 object（字符串化）索引传递给 onclick function。
let t = [{ a: 1, b: 2 }, { a: 3, b: 4 }] populate(t) function populate(t) { let tbody = document.getElementById('tblBody') let tableHtml = '' t.forEach((obj,index) => { tableHtml += ` <tr> <td>${obj.a}</td> <td>${obj.b}</td> <td> <button onclick= "editT(${+index})">Edit</button> </td> </tr> ` }); tbody.innerHTML = tableHtml } const editT = (index) => { const obj = t[index]; console.log(obj) }
<body> <table> <tbody id="tblBody"> </tbody> </table> </body>
Edit编辑
I don't love the idea of encoding the param to editT , because that makes a copy of the parameter.我不喜欢将参数编码为editT的想法，因为那样会复制参数。 If editT is really going to "edit t", t must either be passed as a param or be in the enclosing scope.如果editT真的要“编辑 t”， t必须作为参数传递或在封闭的 scope 中。
Anyway, if the OP really prefers a copy of the selected object via string encoding, here's a snippet that does that.无论如何，如果 OP 真的更喜欢通过字符串编码选择的 object 的副本，这里有一个片段可以做到这一点。 The error in the OP was caused by assigning the onclick prop to a string, rather than a function. OP 中的错误是由于将 onclick 属性分配给字符串而不是 function 引起的。
let t = [{ a: 1, b: 2 }, { a: 3, b: 4 }] populate(t) function populate(t) { let tbody = document.getElementById('tblBody') let tableHtml = '' t.forEach((obj,index) => { let expr = `editT(${JSON.stringify(obj)})`; tableHtml += ` <tr> <td>${obj.a}</td> <td>${obj.b}</td> <td> <button onclick=${expr}>Edit</button> </td> </tr> ` }); tbody.innerHTML = tableHtml } const editT = (obj) => { console.log("note, this is a copy of the object in t:", obj) }
<body> <table> <tbody id="tblBody"> </tbody> </table> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.