如何知道是否在表格行引导程序中单击了按钮

Question

我有我的表，其中我使用 PHP 和一些 MySql 请求显示来自 MySql 数据库的数据。 这就是它的样子

所以我希望当用户单击“voir groupe”按钮时，它会显示一些关于同一表格行的主题（matieres）的数据，其中按钮处于引导模式。 例如第一行： 如果我单击第一行的按钮“voir groupe”，它会以有关“架构”的模式显示数据 如果我单击第 4 行的按钮“voir groupe”，它会在有关“Base de données”的模式中显示数据

这是我的表格代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Begin table-->
 <table class="table table-hover">
        <thead class="thead-light">
          <tr class="text">
            <th>#</th>
            <th>Matières</th>
            <th>Tuteurs</th>
            <th>Voir groupe</th>
            <th>Avis</th>
          </tr>
        </thead>
        <tbody>
          <form method="post" action="avis.php">
          <?php
            $requete = $bdd->query(' SELECT m.intitule_matiere as matiere,e.nom_etudiant as nomtuteur,e.prenom_etudiant as prenomtuteur FROM groupe g INNER JOIN etudiant e ON g.id_etudiant_tuteur=e.id_etudiant INNER JOIN matiere m ON m.id_matiere = g.id_matiere ORDER BY matiere');
            $reqgroupe=$bdd->query('SELECT e.nom_etudiant FROM recoit_soutien as r inner join etudiant as e on r.id_etudiant=e.id_etudiant where r.id_groupe=2');

            $i=1;
              while($data = $requete->fetch()){
                echo'<tr>'
                    .'<td>'.$i.'</td>'
                    .'<td>'.$data['matiere'].'</td>'
                    .'<td>'.$data['nomtuteur'].' '.$data['prenomtuteur'].'</td>'
                    .'<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal"> Voir groupe</button></td>'//  <!-- Trigger the modal with a button -->
                    .'<td> <a href="avis.php"><i class="fa fa-comments"></i></a></td>'
                  .'</tr>';
                  $i++;
               }    
          ?>
          </form>
      </tbody>
      </table> 
 <!--End table-->

这是我的引导模式的代码

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Liste des etudiants</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <table class="table table-hover">
        <thead class="thead-light">
          <tr class="text">
            <th>#</th>
            <th>Noms</th>
          </tr>
        </thead>
        <tbody>
          <?php
            $reqgroupe=$bdd->query('SELECT e.nom_etudiant as nom FROM recoit_soutien as r inner join etudiant as e on r.id_etudiant=e.id_etudiant where r.id_groupe=2');
            $i=1;
              while($data = $reqgroupe->fetch()){
                echo'<tr>'
                    .'<td>'.$i.'</td>'
                    .'<td>'.$data['nom'].'</td>'
                  .'</tr>';
                  $i++;
               }    
          ?>
          </tbody>
      </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Fermer</button>
        </div>
      </div>
      
    </div>
  </div>

Answer 1

首先，您应该通过像class='btnClick' 这样的命名类来监听所有行中按钮的单击事件，然后通过$('.btnClick').click(function() 来监听事件

其次，您应该准确找到$(this).closest('tr')所在的行。

最后，您可以通过$row.find('td').eq(0)访问单元格的任何索引

所以你可以看看下面我的简单例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="row">
    <td>1</td>
    <td><a class="btnClick">Click here</a></td>
  </tr>
  <tr class="row">
    <td>2</td>
    <td><a class="btnClick" >Click here</a></td>
  </tr>
</table>


<script>
$(function(){
    $('.btnClick').click(function(){
        var $row = $(this).closest('tr');
        var $td = $row.find('td').eq(0);
        alert($($td).text());
    });
});
</script>

Answer 2

在您的表格代码中，您必须如下更改

      <?php
        $requete = $bdd->query(' SELECT m.intitule_matiere as matiere,e.nom_etudiant as nomtuteur,e.prenom_etudiant as prenomtuteur FROM groupe g INNER JOIN etudiant e ON g.id_etudiant_tuteur=e.id_etudiant INNER JOIN matiere m ON m.id_matiere = g.id_matiere ORDER BY matiere');
        $reqgroupe=$bdd->query('SELECT e.nom_etudiant FROM recoit_soutien as r inner join etudiant as e on r.id_etudiant=e.id_etudiant where r.id_groupe=2');

        $i=1;
          while($data = $requete->fetch()){
            echo'<tr>'
                .'<td>'.$i.'</td>'
                .'<td>'.$data['matiere'].'</td>'
                .'<td>'.$data['nomtuteur'].' '.$data['prenomtuteur'].'</td>'
                .'<td><a data-name="<?php echo $data['matiere'];?>" href="javascript:;" class="btn btn-info btn-sm btnClick"> Voir groupe</a></td>'//  <!-- Trigger the modal with a button -->
                .'<td> <a href="avis.php"><i class="fa fa-comments"></i></a></td>'
              .'</tr>';
              $i++;
           }    
      ?>
  </tbody>

其次，您必须通过单击按钮使用下面的代码来了解模态数据的使用方式

$('.btnClick').on('click',function(){
     var name = $(this).data('name');
//opening model using jquery
      $('#myModal').modal('show');
})

然后将该名称变量放入模态表中。