如何使用PHP while语句迭代将触发模式弹出窗口的按钮

时间:2019-05-14 21:31:39

标签: javascript php html css

我有一个使用PHP从mysql数据库获取用户数据的系统。 “ while”语句显示数据库表中的结果。我希望能够为数据库中的每个用户添加一项技能。我有一个按钮,单击该按钮时会触发一个带有用户名和ID的模式弹出窗口。我无法获得迭代按钮来触发模式弹出窗口。仅第一行中的按钮起作用。(请原谅我的英语)。我如何获得所有按钮来触发将显示相应用户名和ID的模式弹出窗口?

HTML和PHP

 <Label class="fas" text="&#xf023;"></Label>

JavaScript

char operatorValue;
do
{

    printf("\nEnter Operator:");
    scanf("%c", &operatorValue);

} while (strcmp(operatorValue, '+') != 0 || strcmp(operatorValue, '-') != 0 ||
         strcmp(operatorValue, '*') != 0 || strcmp(operatorValue, '/') != 0);

CSS

  <table id="proj" border="0" width = "85%">
  <tr >
    <td width = "30%" align = "center">User ID</td>
    <td  width = "30%" align = "center">Name</td>
    <td align = "center">Actions</td>
  </tr>
</table>
<!--rows containing stuff from database-->
<?php

include 'dbcon.php';
$sql = "SELECT * FROM users";
$result = $con->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
?>
    <div class="prows">
      <div class="prow" align = "center">
        <div class="id1">
          <?php echo $row["id"]; ?>
        </div>
        <div class="status1">
          <?php  echo $row["name"]; ?>
        </div>
      <div class="pm1">
        <button id="bnUpdt">Add Skill</button>
      </div>
    </div>
  </div>

  <!-- The Modal -->
  <div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2 style="display:inline-block; margin-right:100px;">Name: <?php  echo $row["name"]; ?></h2>
      <p style="display:inline-block;margin-right:100px;">User ID: <?php echo $row["id"]; ?></p>
    </div>
    <form action="update.php" method="post" class="modal-body" align="center">
      <div class="task" >
        <input type="text" name="task" >
        <button type="submit" name="button"> Add</button>
      </div>
    </form>
  </div>
</div>
   <?php
  }
}
?>

我想让每一行中的每个按钮触发模式弹出窗口

1 个答案:

答案 0 :(得分:1)

如ryantxr所述,您不能有多个具有相同名称的ID。添加一个类名,然后遍历它们。大概是这样吗?假设您已将class =“ bnUpdate”添加到必要的元素。

var elem = document.getElementsByClassName('bnUpdt');
for(var i=0; i<elem.length; i++) {
  elem[i].addEventListener("click", function() {
        // add skill code...
  });
}

希望有帮助。