javascript - onclick() 在表中不起作用

Question

我创建了一个约会表并添加了两个链接来接受和拒绝约会。链接显示在表格的每一行中，但是当我单击它时，文本接受和拒绝仅显示在第一行中，我还需要知道如何将按钮单击后出现的文本插入到数据库中 我请求有人为我提供一些帮助，谢谢!

<form method="post" action="delete.php" >
   <table cellpadding="0" cellspacing="0" border="0" class="table table-condensed" id="example">
      <thead>
         <tr>
            <th>appoinment ID</th>
            <th>Date</th>
            <th>time</th>
            <th>teacher</th>
            <th>parent</th>
            <th> accept/reject </th>
            <th>label</th>
         </tr>
      </thead>
      <tbody>
         <?php 
            $query=mysqli_query($conn, "select * from `app` left join `par` on par.par_id=app.par_id
            left join `tea` on tea.tea_id=app.tea_id
            ORDER BY app_id DESC");

                if($query === false)
                {
                    throw new Exception(mysql_error($conn));
                }
                while($row=mysqli_fetch_array($query))
                {
                    $ann_id=$row['app_id'];
                    $date=$row['date'];
                    $msg=$row['time'];

                    $username = $row['username'];
                     $username = $row['p_username'];
            ?>
         <tr>
            <td><?php echo $row['app_id'] ?></td>
            <td> <?php echo date('j/m/y',strtotime($row['date'])); ?></td>
            <td><?php echo $row['time'] ?></td>
            <td><?php echo $row['p_username'] ?></td>
            <td><?php echo $row['username'] ?></td>
            <td>    <a href="#" onclick="document.getElementById('chgtext').innerHTML='reject';">reject</a> &nbsp; &nbsp;
               <a href="#" onclick="document.getElementById('chgtext').innerHTML='accept';">accept</a>&nbsp;  &nbsp;
            </td>
            <td>
               <div id="chgtext">PENDING</div>
            </td>
         </tr>
         <?php 
            }

            ?>
      </tbody>
   </table>
   </div>
</form>

Answer 1

在 jQuery 中，它看起来像这样:

<td>
    <a href="#" class="reject">reject</a> 
    <a href="#" class="accept">accept</a>
</td>
<td>
    <div class="chgtext">PENDING</div>
</td>

然后，在关闭 body 标记之前:

<script>
    $(document).ready(function(){
        $('.reject').on('click', function(){
            var row = $(this).closest('tr'); //find the row the link is in
            var thediv = row.find('.chgtext') //find the correct div within that tr
            $(thediv).text('reject');
        });
        $('.accept').on('click', function(){
            var row = $(this).closest('tr'); //find the row the link is in
            var thediv = row.find('.chgtext') //find the correct div within that tr
            $(thediv).text('accept');
        });
    });
</script>

您可以使代码更短，但我想向您展示它是如何一步一步工作的。