通过 javascript 将带有按钮的 PHP 变量传递给弹出窗口？

Question

我有一个用 PHP 动态创建的表来显示请求。 在我的表格的每一行中都有一个用于打开弹出窗口的按钮。 应将每个请求的 ID 传输到此弹出窗口，以便读出所有数据。

我怎样才能在动态表中（所有按钮名称都相同）区分每个按钮，或者识别我按下的是哪个按钮？ 以及如何通过 javascript 将变量从 PHP 传递到弹出窗口？

我将不胜感激任何帮助，我已经尝试了好几天了，但我没有得到任何结果。

这是表格视图

弹出窗口

    <table id="meineTabelle" data-role="table" class="content"
    data-mode="columntoggle" data-column-btn-text="Spalten">
    <thead>
      <div class="tablehead">
        <tr>
          <th class="thblackborder" data-priority=""></th>
          <th class="thblackborder" data-priority="">1.Projektant</th>
          <th class="thblackborder" data-priority=""></th>
          <th class="thblackborder" data-priority="">2.Projektant</th>
          <th class="thblackborder" data-priority=""></th>
          <th class="thblackborder" data-priority="">3.Projektant</th>
          <th class="thblackborder" data-priority=""></th>
          <th class="thblackborder" data-priority="">4.Projektant</th>
          <th class="thblackborder" data-priority=""></th>
          <tr>
            <th class="">ID</th>
            <th class="">Vorname</th>
            <th class="">Nachname</th>
            <th class="">Vorname</th>
            <th class="">Nachname</th>
            <th class="">Vorname</th>
            <th class="">Nachname</th>
            <th class="">Vorname</th>
            <th class="">Nachname</th>
            <th class="">Titel</th>
            <th class="">Standort</th>
            <th class="">Klasse</th>
            <th class="">Beginn</th>
            <th class="">Abgabe</th>
            <th class="">Beschreibung</th>
            <th class="">Status</th>
            <th class="">Erstellt</th>
          </tr>
        </tr>
      </div>
      </thead>
      <tbody>
    <?php
    foreach ($Ausgabe as $row) {
    ?>
    <form>
    <tr onclick="dialogOeffnen('loslegen-dialog')">
    <td>
            <?php echo $row["ID"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Vorname"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Nachname"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Vorname2"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Nachname2"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Vorname3"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Nachname3"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Vorname4"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Nachname4"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Titel"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Standort"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Klasse"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Beginn"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Abgabe"] . "<br>"; ?>
          </td>
          <td>
            <center><a href=<?php echo "uploads/" . $FileActualName?>">Link</a></center>
          </td>
          <td>
            <?php echo $row["Genehmigt"] . "<br>"; ?>
          </td>
          <td>
            <?php echo $row["Erstellt"] . "<br>"; ?>
          </td>
          <td>
            <input type="button" value="" onclick="">
          </td>
      </tr>
  </form>
    <?php
    }
    ?>
      </tbody>
    </table>

弹出 HTML

    <div id="body-overlay"></div>
    <div class="dialog" id="loslegen-dialog">
      <a href="#" role="button" class="dialog-schließen-button" onclick="dialogSchliessen('loslegen-dialog')">
      <i class="fas fa-times"></i>
      </a>
      <div class="textarea">
        <h1><?php echo $row['ID'] ?></h1>
      <textarea placeholder="Platz für Bemerkungen" name="Bemerkungen" id="" cols="30" rows="10"></textarea>
      </div>
      <form classaction="">
      <div class="txt_field">
            <input type="text" name="email" value="<?= $fetch_profile['email'];?>" required>
            <span></span>
            <label>E-Mail</label>
         </div>
         <div class="txt_field">
            <input type="text" name="password" required>
            <span></span>
            <label>Passwort</label>
         </div>
         <input type="submit" value="Bestätigen" name="submit">
         <div class="signup_link">
      </form>
    </div>
    <script src="dialoge.js">
    </script>
    <script>
      
    </script>
  </body>
</html>
</body>
</html>

对话.js

function dialogOeffnen(dialogId) {
    document.getElementById(dialogId).classList.add("sichtbar");
    document.getElementById("body-overlay").classList.add("sichtbar");
}

function dialogSchliessen(dialogId) {
    document.getElementById(dialogId).classList.remove("sichtbar");
    document.getElementById("body-overlay").classList.remove("sichtbar");
}

如果我回显 $row["ID"] 肯定会显示我表中的最后一个 ID

Answer 1

首先，让我们稍微清理一下您的 HTML。 表具有预定的结构。 这意味着只有一些元素可以用作父元素或子元素。 例如，您不能将<tr>嵌套在另一个<tr>中。 了解表的基础知识。

<table id="meineTabelle" data-role="table" class="content" data-mode="columntoggle" data-column-btn-text="Spalten">
  <thead>
    <tr>
      <th>ID</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Vorname</th>
      <th>Nachname</th>
      <th>Titel</th>
      <th>Standort</th>
      <th>Klasse</th>
      <th>Beginn</th>
      <th>Abgabe</th>
      <th>Beschreibung</th>
      <th>Status</th>
      <th>Erstellt</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($Ausgabe as $row) : ?>
      <tr>
        <td><?= $row["ID"] ?></td>
        <td><?= $row["Vorname"] ?></td>
        <td><?= $row["Nachname"] ?></td>
        <td><?= $row["Vorname2"] ?></td>
        <td><?= $row["Nachname2"] ?></td>
        <td><?= $row["Vorname3"] ?></td>
        <td><?= $row["Nachname3"] ?></td>
        <td><?= $row["Vorname4"] ?></td>
        <td><?= $row["Nachname4"] ?></td>
        <td><?= $row["Titel"] ?></td>
        <td><?= $row["Standort"] ?></td>
        <td><?= $row["Klasse"] ?></td>
        <td><?= $row["Beginn"] ?></td>
        <td><?= $row["Abgabe"] ?></td>
        <td><a href=<?php echo "uploads/" . $FileActualName?>">Link</a></td>
        <td><?= $row["Genehmigt"] ?></td>
        <td><?= $row["Erstellt"] ?></td>
        <td>
          <button class="dialog-open" type="button" value="<?= $row["ID"] ?>">Button</button>
        </td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>

我已将您的按钮更改为<button>元素，因为它使用起来更加灵活。 在value属性中输出行的 ID。 给按钮一个class值来标识它。 我们需要这个用于 JS。

在 JavaScript 中选择表格。 监听表内发生的点击事件。 下面的代码检查点击的元素 ( event.target ) 是否是我们给它的类的按钮。 如果是，那么我们将从按钮读取value并将其传递给打开模态函数。

const table = document.querySelector('#meinTabelle');

table.addEventListener('click', event => {
  if (event.target.matches('.dialog-open') {
    const dialogId = event.target.value;
    dialogOeffnen(dialogId);
  }
});

function dialogOeffnen(dialogId) {
    document.getElementById(dialogId).classList.add("sichtbar");
    document.getElementById("body-overlay").classList.add("sichtbar");
}