onclick()在表中不起作用

时间:2018-03-01 10:25:08

标签: javascript php html mysql onclick

我创建了一个约会表,并添加了两个接受和拒绝约会的链接。链接显示在表格的每一行中,但是当我点击它时,文本接受&拒绝只显示在第一行&我还需要知道如何插入按钮点击进入数据库后出现的文本我会请求别人给我一些帮助谢谢!

<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>

1 个答案:

答案 0 :(得分: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>

您可以缩短代码,但我想逐步向您展示它的工作原理。