Php 按钮仅适用于第一行

我已经将按钮放在我的表编辑列中，但该按钮仅适用于第一行单击事件。我正试图打开按钮点击弹出窗口。弹出窗口仅在单击第一行按钮时打开

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

@foreach（$book作为$data）
{{$data['BookID']}
{{$data['BookName']}
{{$data['BookUnitPrice']}
{{$data['BookUnitPrice']}
@endforeach

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>

var modal=document.getElementById（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

选择javascript中的table（jquery）并循环遍历所有表行。然后添加事件监听器，单击该按钮并执行您想要的任何操作

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

---

您已经创建了多个具有相同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>

@foreach（$book作为$data）
{{$data['BookID']}
{{$data['BookName']}
{{$data['BookUnitPrice']}
{{$data['BookUnitPrice']}
@endforeach

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>

var modal=document.getElementById（'myModal'）//我假设这实际上是独一无二的
var btnContainer=document.getElementById（“按钮父项”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btnContainer.onclick=函数（e）{
modal.style.display=“块”；
//如果您需要知道按下了哪个按钮，那么它就是e.target
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

需要更多关于您的问题的描述，顺便说一句，在您的代码中，所有按钮都具有相同的IDI。假设OP在没有与jQuery相关的标记或代码的情况下使用jQuery是不合理的，但如果您使用引导样板，则laravel使用引导，而引导只使用jQuery。你总是可以选择不使用它。@RehmanMehar很多人使用，大多数人不使用。在css框架的世界里，这是一个很大的世界。