Question

我正在创建一个带有while循环的表，使用PHP从此表中的数据库拖动数据我有2个按钮用于删除，另一个用于编辑。

HTML：

<div id="divCenter" class="box">
    <div style="width: 166px; position: absolute; left: 642px; top: 20px; height: 44px;">
        <img src="../../images/logo.png" width="142" height="33">
    </div>
    <div id="mainDiv">
        <div id="navi"></div>
        <div id="infoi"></div>
        <table id="hor-minimalist-b">
            <div id="bgDimmer"></div>
            <div id="divContent"></div>
            <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Team</th>
                <th scope="col">Created By</th>
                <th scope="col">Created Date</th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            <?php while ($row = $getUsersQuery -> fetch(PDO::FETCH_ASSOC)) { ?>
                <tr>
                    <td id="uId"><?php echo $row["uId"]; ?></td>
                    <td id="fName"><?php echo $row["fName"]; ?></td>
                    <td id="lName"><?php echo $row["lName"]; ?></td>
                    <td id="team"><?php echo $row["uTeam"]; ?></td>
                    <td id="cBy"><?php echo $row["createdBy"]; ?></td>
                    <td id="uCd"><?php echo $row["uCreateDate"]; ?></td>
                    <td><input type="button" name="uEdit" id="uEdit" value="Edit" /></td>
                    <td><a href="deleteUser.php?id=<?php echo $row["uId"] ?>"><input type="button" name="uDelete" id="uDelete" value="Delete" /></a></td>
                </tr>
            <?php } ?>
            </tbody>
        </table>
    </div>
</div>

我的编辑按钮由JQuery函数监视，该函数触发弹出窗口。

JQuery的：

$(document).ready(function () {
    $('#uEdit').click(function (){
        $('#bgDimmer').toggle();
        $('#divContent').toggle().load('editUser.php');
    });
});

问题在于，当绘制表格时，只有第一行编辑按钮才会执行该功能我是否必须添加onclick以使其工作，我真的很想避免，但如果需要，我会。

希望我的问题很清楚，有人可以解释我的问题。

Answer 1

我没有使用元素的id（因为id必须是唯一的而不是重复的），我建议使用类的按钮。

<td><input type="button" class="buttonClassName" name="uEdit" id="uEdit" value="Edit" /></td>

和Jquery：

$(document).ready(function () {
  $('.buttonClassName').click(function (){
     $('#bgDimmer').toggle();
     $('#divContent').toggle().load('editUser.php');
  });
});

Answer 2

试试这段代码

$(document).ready(function () {
    $(document).on('click','#uEdit',function (){
        $('#bgDimmer').toggle();
        $('#divContent').toggle().load('editUser.php');
    });
});

Answer 3

我认为你的问题在于你用uEdit生成多个元素作为他们的id。您应该只在页面上有一个特定ID的元素。使用类而不是ids

尝试相同的事情

Answer 4

您可以尝试更改id =＆＃34; uEdit＆＃34; to class =＆＃34; uEdit＆＃34 ;,然后将代码修改为$（＆＃39; .uEdit＆＃39;）。click（function（）{// code}）。 Id表示页面上的唯一元素

Answer 5

在按钮

中使用class而不是id

HTML

<input type="button" name="uEdit" class="uEdit" value="Edit" />

Jquery的

$(document).ready(function () {
    $('.uEdit').click(function (){
        $('#bgDimmer').toggle();
        $('#divContent').toggle().load('editUser.php');
    });
});

动态表内的按钮只执行一次JQuery函数

5 个答案: