go - 如何访问在GOHTML模板中动态创建的行？

Question

在我的GOHTML文件中，我正在使用range从结果中动态创建表行。此外，我想访问每一行进行诸如编辑或删除之类的操作。例如:单击一行应打开一个模态及其值。但是，在我当前的实现中，模式仅出现在第一行。点击对其余行无效。

表:

<table>
{{range .Bdata}}

    <tr class="buy" id="trx_buy"> 
          <td>{{.Sname}}</td> 
          <td align="center">{{.Uprice}} </td> 
          <td align="center">{{.Qty}} </td>
          <td align="center">{{.Bfee}}</td>
          <td align="center">{{.Tprice}}</td>
          <td align="center">{{.Fdate}}</td>
     </tr> 
        {{end}}
      </table>

<div class="modal-content">
    <span class="close">&times;</span>
    <p>{{.Sname}}, {{.Uprice}} </p>
  </div>

</div>

处理onclick的脚本:

<script>
// Get the modal
var modal = document.getElementById("myModal");

var tr_buy = document.getElementById("trx_buy");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

tr_buy.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Answer 1

您的问题在var tr_buy = document.getElementById("trx_buy");中。这只会给您第一个匹配的元素。您可以改用document.getElementsByClassName并将onClick()侦听器添加到所有元素。