在树枝视图中单击按钮时，为 table 的每个元素显示一个对话框 window

Question

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

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

如您所见，这是一个基本的 html 页面。我在 loop {% for currentData in arrayData %} 中的 table 中显示所有 datas。在这个table上，有两种类型的按钮：Show Details按钮和Edit按钮。 “编辑”按钮运行良好，没问题，我的重定向适用于我 table 中的所有数据，我可以编辑我选择的数据。

对于按钮 Show Details：所需的行为是 window 对话框 在我的页面中打开并包含我需要显示的所有数据每行。但事实上，当我点击 Show Details 时，我的对话框 window 只在我的 table 的第一行工作，而当我点击另一行的另一个 Show Details 按钮时，没有任何反应（真的什么都没有）。

我哪里错了？

请注意，目前，我没有在 window 对话框中传递数据，我通过 Ajax 和 Symfony Controller 传递数据。

Answer 1

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

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

这将导致 id 属性不是唯一的——这是无效的，也不会起作用。您可以将 {{ loop.index }} 附加到当前 id 值以生成唯一 ID，或者（更好）使用 jQuery 并执行类似 ...

的操作

$('button.btn.btn-info.btn-xs').on(
    'click',
    function() {
        var clickedButton = $(this);
        // do something ...
    }
)

Answer 2

因为 id 用于获取单个 dom 元素，并且您不应该在多个 dom 元素上使用相同的 id，您应该做的是添加一个 class 比如 show ： <a><button class="btn btn-info btn-xs show" id="show">Show Details</button></a>，然后使用document.getElementsByClassName('show')获取所有带有class show的按钮，然后你可以为每个按钮添加Eventlistener：

(function() {
    var dialog = document.getElementById('window');
    // Array of the buttons.
    var showButtons = document.getElementsByClassName('show');
    // Event handler
    var showDialog = function() {
      // Now you have to use the show button as base , to find the data you want
      // to display...
      console.log(this);
      dialog.show();
    };
    var i, len = showButtons.length;
    for(i = 0; i < len; ++i) {
        showButtons[i].onclick = showDialog;
    }
    document.getElementById('exit').onclick = function() {
      dialog.close();
    };
  })();

jsFiddle

Answer 3

这是因为您试图为所有按钮设置相同的 ID。不要那样做 - 它无效 HTML。您应该改用 class 并使用 getElementsByClassName 获取所有按钮，如下所示：

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

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

举个例子fiddlehttps://jsfiddle.net/0qaht3ry/

在树枝视图中单击按钮时，为 table 的每个元素显示一个对话框 window

display a dialog window for each element of table when clicking on a button in twig view

html

javascript

loops

symfony

twig