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>

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