按钮仅适用于第一行

Question

我已将按钮放在我的表格 EDIT 列中，但该按钮仅适用于第一行点击事件。我正在尝试在单击按钮时打开弹出窗口。只有第一行按钮单击才会打开弹出窗口。

<tbody>
    @foreach($books as $data)
     <tr>
         <td> {{$data['BookID']}} </td>
         <td> {{$data['BookName']}} </td>
         <td> {{$data['BookUnitPrice']}} </td>
         <td><button type="button" value="EDIT" style="height:20px;" id="myBtn"></button></td>
         <td> {{$data['BookUnitPrice']}} </td>
     </tr>
    @endforeach
</tbody> 

javascript 代码

<script>
    var modal = document.getElementById('myModal');

    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");

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

    // When the user clicks the button, open the modal 
    btn.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

您创建了多个具有相同 id 的按钮，这是不允许的，因为 id 是元素的唯一标识符。您可以给每个按钮一个唯一的 id，然后监听所有按钮，但更简单的事情是监听事件冒泡：

<tbody id="button-parent">
    @foreach($books as $data)
     <tr>
         <td> {{$data['BookID']}} </td>
         <td> {{$data['BookName']}} </td>
         <td> {{$data['BookUnitPrice']}} </td>
         <td><button type="button" value="EDIT" style="height:20px;"></button></td>
         <td> {{$data['BookUnitPrice']}} </td>
     </tr>
    @endforeach
</tbody>

Javascript

<script>
    var modal = document.getElementById('myModal'); //I am assuming that this actually is unique
    var btnContainer = document.getElementById("button-parent");

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

    // When the user clicks the button, open the modal 
    btnContainer.onclick = function(e) {
        modal.style.display = "block";
        // if you need to know which button was pressed then it's e.target
    }

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

在 javascript (jquery) 中选择表并遍历所有表行。然后添加单击该按钮的事件侦听器并执行您想要的任何操作。

$('table tr').each((i,element), () => {
  $(`${element} td button`).click(() => {
    // perform any action you want
  });
});