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

Posted 2023-05-08

【中文标题】如何知道是不是在表格行引导程序中单击了按钮

【英文标题】：How to know if a button have been clicked in a table row bootstrap如何知道是否在表格行引导程序中单击了按钮

【发布时间】：2020-04-23 19:44:12

【问题描述】：

我有我的表，其中我使用 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>

【问题讨论】：

试试这个链接以获得一些见解。您可以使用 $_GET 变量来跟踪您单击了哪个项目，然后根据唯一的 # ***.com/questions/59463639/…

查询该数据

【参考方案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>

【讨论】：

这可能对我有帮助。但我必须找到一种方法将变量的名称放在我的查询中 像这样： SELECT e.nom_etudiant FROM recoit_soutien as r inner join etudiant as e on r.id_etudiant=e.id_etudiant inner join groupe as g on g.id_groupe =r.id_groupe 内连接 matiere as m on m.id_matiere=g.id_matiere where m.intitule_matiere like ".$name."

很明显，你已经通过我给你的方式获得了价值 $name。它属于逻辑。

但我不知道该怎么做，你能帮我或任何链接吗？我被卡住了

【参考方案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');
)

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

【讨论】：

不，我必须找到一种方法将名称放入我的查询中 像这样：SELECT e.nom_etudiant FROM recoit_soutien as r inner join etudiant as e on r.id_etudiant=e.id_etudiant inner join groupe as g on g.id_groupe=r.id_groupe inner join matiere as m on m.id_matiere=g.id_matiere where m.intitule_matiere like ".$name."

好的，那么您必须在单击时进行 ajax 调用并将var name 作为 ajax 中的数据传递，然后在成功后您可以使用上述代码打开您的模式。

这就是我要做的事情