Как узнать, была ли нажата кнопка в строке таблицы bootstrap

Question

У меня есть таблица, в которой я отображаю данные из базы данных MySql с PHP и некоторым запросом MySql. И это то, что выглядит как

Поэтому мне бы хотелось, чтобы, когда пользователь нажимает кнопку «Voir Groupe», он отображал некоторые данные, относящиеся к теме (matieres) объекта. та же строка таблицы с кнопкой в ​​модальном bootstrap. Например, для 1-го ряда: если я нажимаю на кнопку «Voir Groupe» 1-го ряда, он отображает данные в модальном разделе «Архитектура». Если я нажимаю на кнопку «Voir Groupe» 4-го ряда, он отображает данные в Модал, касающийся "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-->

А вот код моего bootstrap модального

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

В вашем коде таблицы вы должны изменить, как показано ниже

      <?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');
})

И поместите эту переменную имени в вашу таблицу в модальный режим.

Answer 2

Во-первых , вы должны прослушать событие по нажатию кнопки во всех строках, назвав класс следующим образом 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>