javascript - 如何在 Golang 中遍历数据并在 Javascript 中使用时创建唯一 ID

Question

我从服务器获取数据并迭代它以创建一个表，然后我使用一个表单使用 javascript 将 id 存储到本地存储。这是代码片段

<table>
    <tr><th>Product ID</th></tr>
    {{range .}}
    <td ><form onsubmit="save_data()" action="/" method="get"><button class="btn btn-info pid" id="pid" name="{{.puid}}" value="{{.puid}}">Update</button></form></td>
    {{end}}
<table>

<script>

function save_data() {
  var input = document.getElementByID("pid");
  localStorage.setItem("id", input.value); 

}   

</script>

但是每次，无论我单击哪个表格行的“更新”按钮，每次都只会存储第一个表格行元素的 ID。 有没有一种方法可以生成唯一的 ID 并在遍历数据时在 Javascript 中引用它。 谢谢

Answer 1

在你的循环中

<button class="..." id="pid" name="{{.puid}}" value="{{.puid}}">Update</button>

这意味着所有按钮都有 id 属性和相同的值 pid。这是一个错误，因为 id-s 在文档中必须是唯一的。当你打电话时

document.getElementById("pid");

返回与 id="pid" 匹配的第一个元素。这解释了为什么“只有第一个表格行元素的 ID 被存储”。

要为每一行创建唯一的 ID，您可以使用类似的东西

{{range $index, $value := .}}
...<button class="..." id="pid{{$index}}" name="{{$value.puid}}" value="{{$value.puid}}">Update</button>...
{{end}}

但是当您的 save_data() 事件触发时，您会遇到如何知道提交了哪个表单的问题。要解决这个问题，您可以将当前表单或行 ID 作为参数发送，例如

{{range $index, $value := .}}
<td><form onsubmit="save_data(this, {{$index}})" action="/" method="get">...</form></td>
{{end}}

function save_data(form, rowno) {
  var input = document.getElementById("pid"+rowno);
  localStorage.setItem("id", input.value); 
}