Javascript 在“细枝视图”中单击按钮时，为表的每个元素显示一个对话框窗口

我在我的symfony项目的twig视图中有以下代码：

<table>
  <thead>
    <tr>
      <th>DATA 1</th>
      <th>DATA 2</th>
      <th>DATA 3</th>
      <th>DATA 4</th>
      <th>DATA 5</th>
      <th>DATA 6</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {% for currentData in arrayData %}
      <tr>
        <td>{{ currentData.data1}}</td>
        <td>{{ currentData.data2}}</td>
        <td>{{ currentData.data3}}</td>
        <td>{{ currentData.data4}}</td>
        <td>{{ currentData.data5}}</td>
        <td>{{ currentData.data6}}</td>
        <td>
          <a><button class="btn btn-info btn-xs" id="show">Show Details</button></a> <!-- for open dialog window -->
          <a href="{{ path('editData', {'idData': currentData.idData }) }}"><button class="btn btn-warning btn-xs">Edit</button></a>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<!-- dialog window-->
<dialog id="window">
  <div class="header">
    <ul class="nav nav-tabs">
        <li role="presentation" class="active">
          <a>Detail</a>
        </li>
        <button class="btn btn-danger btn-sm pull-right" id="exit">Close</button>
    </ul>
  </div>
  <div class="panel-body page-header">
    <!-- my content here -->
  </div>
</dialog>

<script>
  (function() {
    var dialog = document.getElementById('window');
    document.getElementById('show').onclick = function() {
      dialog.show();
    };
    document.getElementById('exit').onclick = function() {
      dialog.close();
    };
  })();
</script>

数据1
数据2
数据3
数据4
数据5
数据6
{%用于arrayData%中的currentData}
{{currentData.data1}
{{currentData.data2}
{{currentData.data3}
{{currentData.data4}
{{currentData.data5}
{{currentData.data6}
{%endfor%}


细节

接近

（功能（）{
var dialog=document.getElementById（'window'）；
document.getElementById（'show'）。onclick=function（）{
dialog.show（）；
};
document.getElementById（'exit'）。onclick=function（）{
dialog.close（）；
};
})();

如您所见，这是一个基本的html页面。我在我的循环中的表中显示所有数据{%forcurrentdata%}。 在此表中，有两种类型的按钮：

显示详细信息

按钮和

编辑

按钮。“编辑”按钮工作正常，没有问题，我的重定向适用于表中的所有数据，我可以编辑我选择的数据

对于按钮

显示详细信息

：所需的行为是在我的页面中打开一个窗口对话框，其中包含我需要为每行显示的所有数据。但事实上，当我单击

显示详细信息

时，我的对话框窗口仅在表格的第一行工作，当我单击另一行的另一个显示详细信息按钮时，什么也没有发生（实际上什么也没有发生）

我错在哪里

---

请注意，目前，我不在窗口对话框中传递数据，而是通过Ajax和Symfony Controller传递数据。

您在循环体中使用这一行：

<button class="btn btn-info btn-xs" id="show">

---

您正在循环体中使用此行：

<button class="btn btn-info btn-xs" id="show">

---

您正在循环体中使用此行：

<button class="btn btn-info btn-xs" id="show">

---

您正在循环体中使用此行：

<button class="btn btn-info btn-xs" id="show">

---

由于

id

用于获取单个dom元素，并且您不应该在多个dom元素上使用相同的

id

，因此您应该添加一个类，如

show

：

---

因为
id
用于获取单个dom元素，并且您不应该在多个dom元素上使用相同的
id
，所以您应该添加一个类，如
show
：
因为
id
用于获取单个dom元素，并且您不应该在多个dom元素上使用相同的
id
，所以您应该添加一个类，如
show
：
因为
id
用于获取单个dom元素，并且您不应该在多个dom元素上使用相同的
id
，所以您应该添加一个类，如
show
：
这是因为您试图为所有按钮设置相同的id。不要这样做-它不是有效的HTML。您应该使用一个类，并使用GetElementsByCassName获取所有按钮，如下所示：

var buttons = document.getElementsByClassName("show"); 

for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){
        alert("Why hello there!");
    };
}

var buttons=document.getElementsByClassName（“show”）；
对于（变量i=0；i

这里有一个例子fiddle，因为您试图为所有按钮设置相同的id。不要这样做-它不是有效的HTML。您应该使用一个类，并使用GetElementsByCassName获取所有按钮，如下所示：

var buttons = document.getElementsByClassName("show"); 

for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){
        alert("Why hello there!");
    };
}

var buttons=document.getElementsByClassName（“show”）；
对于（变量i=0；i

这里有一个例子fiddle，因为您试图为所有按钮设置相同的id。不要这样做-它不是有效的HTML。您应该使用一个类，并使用GetElementsByCassName获取所有按钮，如下所示：

var buttons = document.getElementsByClassName("show"); 

for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){
        alert("Why hello there!");
    };
}

var buttons=document.getElementsByClassName（“show”）；
对于（变量i=0；i

这里有一个例子fiddle，因为您试图为所有按钮设置相同的id。不要这样做-它不是有效的HTML。您应该使用一个类，并使用GetElementsByCassName获取所有按钮，如下所示：

var buttons = document.getElementsByClassName("show"); 

for(var i = 0; i < buttons.length; i++){
    buttons[i].onclick = function(){
        alert("Why hello there!");
    };
}

var buttons=document.getElementsByClassName（“show”）；
对于（变量i=0；i

这是一个提琴示例
谢谢你的解释，我理解我犯的错误，如果我循环，我没有选择id。谢谢你的解释，我理解我犯的错误，如果我循环，我没有选择id。谢谢你的解释，我理解我犯的错误，如果我在上循环，则未选择id。感谢您的解释，我理解我所犯的错误，如果我在上循环，则未选择id。非常感谢，我理解我不必在这种情况下选择有效HTML的id。我喜欢你解释和评论代码的方式，它让我能够真正理解这种编码方式下的javascript。这就是我选择你的答案的原因。谢谢，你刚才鼓励我在回答问题时保持这种编码风格！欢迎您，并且真诚地说，这种分享代码理解的方式是理解错误和在编写代码时有适当行为的最佳方式。非常感谢您，我知道我不必在这种情况下为有效的HTML选择id。我喜欢你解释和评论代码的方式，它让我能够真正理解这种编码方式下的javascript。这就是为什么我选择你的答案。谢谢，你刚才鼓励我在回答问题时保持这种编码方式