-1

在我的 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>
4

1 回答 1

0

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

于 2020-06-13T15:10:00.377 回答