多平台统一管理软件接口,如何实现多平台统一管理软件接口
308
2023-05-15
bootstrap响应式表格实例详解
Bootstrap 的响应式 css 能够自适应于台式机、平板电脑和手机,现在就bootstrap的响应式举一个例子:
如上图所示,要实现该表格在手机等移动端上只显示代号、名称、和价格,其他以查看详情的方式显示(也就是下图:)
首先,先实现在移动端能由左图到右图的转换:
代码如下:
query($sql);
foreach($arr as $v){
echo "
";
//为什么id='xq'不行?不要用id,id是唯一的,此处有多个查看详情。。。。记住了!!!!
}
?>
代号 名称 价格 产地 库存 数量 操作
其次:实现点击查看详情出现模态框
$(".xq").click(function(){
var code = $(this).attr("code"); //取属性值
$.ajax({
url:"chuli.php",
data:{code:code},
type:"POST",LbhlxJ
dataType:"TEXT",
success:function(data){
var lie = data.trim().split("^");
var str="
$("#neirong").html(str);
// $("#mymodal").modal("show"); 双引号不行!!!
//触发模态框
$('#myModal').modal('show');
}
});
})
处理页面:chuli.php
$code=$_POST["code"];
require "../DB.class.php";
$db=new DB();
$sql = "select * from buyfruits where ids='{$code}'";
$arr = $db->strquery($sql);
echo $arr;
?>
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~