简体   繁体   English

2个HTML表列中的SQL查询回显循环

[英]SQL Query echo loop in 2 html table colums

Is it possible to echo database data into 2 html table colums like a loop? 是否有可能像循环一样将数据库数据回显到2个html表列中? I can't make it work. 我不能使它工作。 Or do I need a different approach? 还是我需要其他方法?

I need this to echo like a loop into 2 columns <?php echo $row['data']; ?> 我需要它像2列循环那样回显<?php echo $row['data']; ?> <?php echo $row['data']; ?>

This is what I have: 这就是我所拥有的:

HTML Table
Col 1    |    Col 2
1. aaaa
2. bbbb
3. cccc
4. dddd
5. eeee
6. ffff
7. gggg
8. hhhh
9. iiii
10. jjjj

This is what I want: 这就是我要的:

HTML Table
Col 1         |     Col 2
1. aaaa             6. ffff
2. bbbb             7. gggg
3. cccc             8. hhhh
4. dddd             9. iiii
5. eeee             10. jjjj

It's absolutely possible. 绝对有可能。

All you need to do is echo out alternating classes, which can be done by making use of a counter which increments as you loop over the rows. 您需要做的就是echo交替类,这可以通过使用一个计数器来实现,该计数器在您遍历行时会递增。 For example: 例如:

<?php

$count = 0;
foreach ($rows as $row) {
   $count++; // Increment a counter
   if ($count % 2 == 0 && $count != count($rows)) {
     echo "<div class='odd'></div>";
   }
   else {
     echo "<div class='even'></div>";
   }
}

?>

And from here you can use CSS to style the rows into two columns: 从这里开始,您可以使用CSS将行样式设置为两列:

.odd, .even {
  width: 50%;
  float: left;
}

Or if you want to do this with pure CSS, you can make use of flexbox. 或者,如果您想使用纯CSS做到这一点,则可以使用flexbox。 All you need is display: flex and flex-wrap: wrap on the parent, along with flex: 50% on the children: 您所需display: flex只是display: flexflex-wrap: wrap在父flex-wrap: wrap ,以及flex: 50%在子级上flex: 50%

 .container { display: flex; flex-wrap: wrap; } .container div { flex: 50%; } 
 <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> 

Which will also allow you to fill the left-hand column first if you want, by making use of flex-flow: column wrap and a fixed height : 如果需要的话,也可以使用flex-flow: column wrap和固定的height ,先填充左侧的列:

 .container { display: flex; flex-flow: column wrap; height: 100px; } 
 <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> 

Here code is for creating dynamic column and data, that might any length, 这里的代码是用于创建动态列和数据的,它可以是任意长度,

Splitting into 5 groups and make it as column value. 分为5组,并作为列值。 Worked output is below 工作输出如下

<?php
 //$row=array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20);
 $row=array('aaa','bbbb','cccc','ddddd','eeeee','ffff','gggg','hhhh','iiii','jjjjj','kkkk','llll','mmmm','nnnnn','ooooo');
?>
<table style="width:50%">
<?php
echo'<tr>';
$i=0;
foreach ($row as $key => $value) {
    if(($key)%5==0)
    {
        $i++;
        echo'<th>Col'.$i.'</th>';
    }
    $a[$i][]=$value;        
}
echo'</tr>';
$forcount=count($a);
$innerforcount=count($a[1]);
for ($j=0; $j <$innerforcount ; $j++) {
    echo'<tr>';
    for($i=1;$i<=$forcount;$i++)
        echo'<td>'.$a[$i][$j].'</td>';
    echo"</tr>";
}
?>
</table>

//Output //输出

 Col1   Col2    Col3    Col4
1   6   11  16
2   7   12  17
3   8   13  18
4   9   14  19
5   10  15  20

//Sample out with text //用文本采样

 Col1   Col2    Col3
aaa     ffff    kkkk
bbbb    gggg    llll
cccc    hhhh    mmmm
ddddd   iiii    nnnnn
eeeee   jjjjj   ooooo

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM