Question

我有一个表格，我在每行动态创建一个按钮。因此，如果我们有3行，我们将在每行的第3列有3个按钮。

我在两个层面遇到问题：

i）分配一个将在所有按钮的'onClick'上调用的函数。 ii）读取已按下的按钮的相应列的值，例如：假设我们有3列，我按下第2行第3列的按钮，我需要读取第2行，第1列和第2列的值。

整个事情是动态建立的。

这是表格：

<body>
    <div id="up"></div>
    <table id = "tab" style="width:500px">
        <tr>
            <th>Date/Time</th>
            <th>Session Activity</th>
            <th>Action</th>
        </tr>
             <?php
                    $uid = $_SESSION["uid"];
                    $client = $_SESSION["Client"];
                    $con = mysqli_connect('localhost', 'root', '12345', 'MyDB');
                    if (mysqli_connect_errno()){
                        echo "<option value='".'0'."'>".'Connection Error'."</option>";
                        exit();
                    }else{
                        $res=mysqli_query($con, "select * from TL_Session_Notes Where Uid = '".$uid."' AND CName = '".$client."'");
                        while($row=mysqli_fetch_array($res))
                        {
                            echo "<tr><td>".$row['Sn_date'].'/'.$row['Sn_time']."</td><td>".$row['Sn_activity']."</td>".
                            "<td id = '"."openBtns"."'><input type='"."button"."' class = '"."btns"."' value = '"."Open Session Note"."' action = '"."OpenSession()"."'/>"."</td></tr>";
                        }
                    }
                    mysqli_close($con);
             ?>
    </table>
    <div id="down"></div>
</body>

以下是我试图让（i）部分工作的代码：

<script>
        $(document).ready(function(){
            $("openBtns").on('click', '.btns', function() {
                OpenSession();
            });
        });
        function OpenSession(){
            window.location.replace('Sessions.php');
        }
</script>

需要一些关于如何做到这一点的帮助以及我的方法出错的地方。

Answer 1

您的td.openBtns也是动态添加的。您必须使用静态/非动态的选择器。

看起来#tab就是你想要的那个。

$("#tab").on('click', '.btns', function() {
    OpenSession();
});

或尝试

$(document).on('click', '.btns', function() {
    OpenSession();
});

Answer 2

选择器$("openBtns")占用了所有<openBtns>个元素

由于您的表格带有ID＆＃34; openBtns＆＃34;，因此您需要在ID之前添加#。

$("#openBtns").on('click', '.btns', function() {
       OpenSession();
});

Answer 3

尝试：

<html>
<head>
    <script type="text/javascript">
    function OpenSession(date, time, activity)
    {
/* here we can do something creative with the arguments date, time and activity */
            window.location.replace('Sessions.php');
    }
    </script>
</head>
<body>
    <div id="up"></div>
    <table id="tab" style="width:500px">
        <tr>
            <th>Date/Time</th>
            <th>Session Activity</th>
            <th>Action</th>
        </tr>
<?php
        output_rows();
?>
    </table>
    <div id="down"></div>
</body>

<?php
function output_rows()
{
    $uid = $_SESSION["uid"];
    $client = $_SESSION["Client"];

    $con = mysqli_connect('localhost', 'root', '12345', 'MyDB');

    if (mysqli_connect_errno()){
            echo "<option value='0'>Connection Error</option>";
    }else{
        $name = mysql_escape_string($name);
        $client = mysql_escape_string($client);
        $res=mysqli_query($con, "select * from TL_Session_Notes Where Uid='$uid' AND CName='$client'");

        while($row=mysqli_fetch_array($res))
        {
            $date = $row['Sn_date'];
            $time = $row['Sn_time'];
            $activity = $row['Sn_activity'];

            echo "<tr>";
                echo "<td>$date/$time</td><td>$activity</td>";              
                echo "<td><input type='button' class='btns' value='Open Session Note' onclick='OpenSession(\"$date\", \"$time\", \"$activity\")' /></td>";
            echo "</tr>";
        }
    }

    mysqli_close($con);
}
?>
</body>
</html>

Answer 4

这应该解决您请求的第二部分。

$('.openBtns').on('click', '.btns', function () { var td1 = $(this).closest('td').prev('td').text(); var td2 = $(this).closest('td').prev('td').prev('td').text() alert(td1 + ' ' + td2); });

使用JQuery将onClick分配给动态按钮

4 个答案: