javascript - 单击jquery时选择某些按钮值

Question

在预订页面的查看/编辑部分，我有一个通过 AJAX 生成的表格，其中包含预订时间、房间号、日期和编辑预订，该预订有一个按钮，其分配的值从 0 开始，上升取决于生成的行数，因此当单击时，我可以通过值编号定位该行，以获取正确的字段发送到我的 SQL 语句。

<? php 
function usersBookings($group) {
        $q = $this->connection->prepare("SELECT `timeslot`.`shortDesc`, `booking`.`room_ID`, `booking`.`date` FROM `booking` JOIN `timeslot` ON `timeslot`.`blockID` = `booking`.`block_ID` 
        WHERE `team_name` LIKE ? ORDER BY `booking`.`date` ASC");
        $q->execute(Array($group));
        $str =  "<table id='userTable' style='width:80%'>
                    <tr>
                        <th style='border-bottom:1px solid black'>Booking Time</th>
                        <th style='border-bottom:1px solid black'>Room Number</th>
                        <th style='border-bottom:1px solid black'>Date</th>
                        <th style='border-bottom:1px solid black'>Edit Booking</th>
                    </tr>";
            $counter = 0;
            while ($result = $q->fetch()) {
                    $str .= "<tr>
                        <td>$result[0]</td>
                        <td>$result[1]</td>
                        <td>$result[2]</td>
                        <td><button class='edit_btn' value='$counter'>Edit</button></td>
                    </tr>";

                $counter++;         
            }

            $str .= "</table>";
            return $str;
    }
?>

现在我尝试通过 jQuery 定位点击哪个按钮来定位该特定行:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">

 $buttonNo = $('#userTable button').val(); // Not sure how to target.

 $field1 = $('#userTable tr:nth-child(' + $buttonNo + ') td:nth-child(1)');
 $field2 = $('#userTable tr:nth-child(' + $buttonNo + ') td:nth-child(2)');
 $field3 = $('#userTable tr:nth-child(' + $buttonNo + ') td:nth-child(3)');
</script>

但我不确定如何定位正确的点击按钮。

请原谅这段代码，它对于 PHP 和 jQuery 来说是全新的。

Answer 1

您可以使用.click事件并获取this:

$('#userTable button').click(function(){
     $buttonNo = $(this).val(); 
     ...
});