0
私は左のアコーディオンにテーブルレコードの半分を印刷し、右のdivには残りの半レコードを印刷したいと思います。私は次のコードを使用しています。私はテーブルの2つの列を開きます。私は記録を持っています。最初の2つのレコードが左のアコーディオンになり、次の2つのレコードが右のアコーディオンになるはずです。私は次のコードを使用しています。アコーディオンのphpデータベースの値を出力
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "data";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, price FROM demo";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
print_r($row);
}
} else {
echo "0 results";
}
$conn->close();
?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="ordinary">
<div class="container">
<div class="row main-row">
<!--left-->
<div class="col-md-6">
<div class="col-inner left-col">
<div class="accordion-group" id="accordion">
<div class="accordion-panel" >
<div class="heading glyphicon-custom">
<h4 class="title left-title">
<a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-plus gly-font "></i><span class="title-panel">Antipasti</span></a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="contain-body">
<div class="su-spoiler-content su-clearfix inner-content">
1
</div>
</div>
</div>
</div>
</div>
</div>
<!--make it 50% -->
<div class="col-inner left-col">
<div class="accordion-group" id="accordion">
<div class="accordion-panel" >
<div class="heading glyphicon-custom">
<h4 class="title left-title">
<a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus gly-font "></i><span class="title-panel">Antipasti</span></a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="contain-body">
<div class="su-spoiler-content su-clearfix inner-content">
2
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- left-col-md-6 ends here -->
<div class="col-md-6 ">
<div class="col-inner right-all">
<div class="accordion-group" id="accordion">
<div class="accordion-panel" >
<div class="heading glyphicon-custom">
<h4 class="title">
<a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus gly-font "></i><span class="title-panel">Antipasti</span></a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="contain-body">
<div class="su-spoiler-content su-clearfix inner-right">
3
</div>
</div>
</div>
</div>
</div>
</div>
<!-- accordian -->
<div class="col-inner right-all">
<div class="accordion-group" id="accordion">
<div class="accordion-panel" >
<div class="heading glyphicon-custom">
<h4 class="title">
<a class="accordion-toggle title-font" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="glyphicon glyphicon-plus gly-font "></i><span class="title-panel">Antipasti</span></a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="contain-body">
<div class="su-spoiler-content su-clearfix inner-right">
4
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
</div> <!-- right-col-md-6 ends here -->
</div>
</div>
</div>
<script type="text/javascript">
var selectIds =$('#panel1,#panel2,#panel3,#panel4');
$(function ($) {
selectIds.on('hidden.bs.collapse show.bs.collapse', function() {
$(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
})
});
</script>
</body>
私の質問は、どのように動的にアコーデオンのデータベース値を印刷する –