Comment configurer une table réactive dans bootstrap-Tutoriel d'amorçage-php.cn

Comment configurer une table réactive dans bootstrap

尚

Libérer： 2019-07-27 15:26:43

original

3619 Les gens l'ont consulté

Comment configurer une table réactive dans bootstrap

Le formulaire réactif de bootstrap convient aux téléphones mobiles, aux tablettes et aux clients de bureau.

Voici comment utiliser bootstrap pour implémenter une table réactive :

Tout d'abord, la table que nous utilisons est la voiture de table cycliste :

Comment configurer une table réactive dans bootstrap Ensuite, nous devons introduire plusieurs fichiers, à savoir les fichiers css bootstrap et les fichiers js et le package jquery :

<link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="jquery-3.2.0.min.js">
</script><script src="dist/js/bootstrap.min.js"></script>

Copier après la connexion

Ensuite, il y a le code de la page principale. À l'exception de l'introduction des styles de table et des boîtes modales, tout le reste est. la même que la méthode PHP précédente. :

<body>
<h1>汽车信息</h1>
<table class="table table-striped">
  <thead>
    <tr>
      <td>代号</td>
      <td>名称</td>
      <td class="hidden-xs">系列</td><!--在手机上隐藏，在电脑是显示-->
      <td class="hidden-xs">上市时间</td>
      <td class="hidden-xs">油耗</td>
      <td class="hidden-xs">功率</td>
      <td>价格</td>
      <th class="visible-xs-block">操作</th><!--在手机显示，在电脑隐藏-->
    </tr>
    </thead>
  <?php
    require "DBDA.class.php";
    $db = new DBDA();
    $sql = "select * from car";
    $arr = $db->query($sql);
    foreach($arr as $v)
    {
        echo "<tr>
      <td>{$v[0]}</td>
      <td>{$v[1]}</td>
      <td class=&#39;hidden-xs&#39;>{$v[2]}</td>
      <td class=&#39;hidden-xs&#39;>{$v[3]}</td>
      <td class=&#39;hidden-xs&#39;>{$v[4]}</td>
      <td class=&#39;hidden-xs&#39;>{$v[5]}</td>
      <td>{$v[7]}</td>
      <td class=&#39;visible-xs-block&#39;>
      <button type=&#39;button&#39; class=&#39;btn btn-primary btn-xs xq&#39; code=&#39;{$v[0]}&#39;>详情</button>
      </td>
    </tr>";/*引入bootstrap的按钮样式*/
    }
    
    ?>
</table>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">汽车详细信息</h4>
            </div>
            <div class="modal-body" id="neirong"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

</body>
<script>
$(".xq").click(function(){
    //显示详细信息    
    //取代号
    var code = $(this).attr("code");
    $.ajax({
        url:"bootchuli.php",
        data:{code:code},
        type:"POST",
        dataType:"TEXT",
        success: function(data){
            var lie = data.trim().split("^");
            var str = "<div>代号："+lie[0]+"</div><div>名称："+lie[1]+"</div><div>系列："+lie[2]+"</div><div>上市时间："+lie[3]+"</div><div>油耗："+lie[4]+"</div><div>功率："+lie[5]+"</div><div>价格："+lie[7]+"</div>";
            $("#neirong").html(str);
            //触发模态框
            $(&#39;#myModal&#39;).modal(&#39;show&#39;);
        }
    });
})
</script>
</html>

Copier après la connexion

Page de traitement :

<?php
$code = $_POST["code"];
require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from car where code=&#39;{$code}&#39;";
echo $db->strquery($sql);

Copier après la connexion

Rendu final :

Comment configurer une table réactive dans bootstrap Version mobile :