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

大家好，今天本人给大家带来文章《如何访问GOHTML模板中动态创建的行？》，文中内容主要涉及到，如果你对Golang方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

在我的 gohtml 文件中，我使用范围从结果动态创建表行。此外，我想访问每一行以进行编辑或删除等操作。例如：单击一行应打开一个包含其值的模式。但是，在我当前的实现中，模式仅出现在第一行。单击对其余行不起作用。

表：

<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>

解决方案

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

理论要掌握，实操不能落！以上关于《如何访问GOHTML模板中动态创建的行？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！