我将值存储在数组中，然后循环通过它并根据条件创建动态HTML td和tr。当循环增量值为6和11时，表tr应该切换到下一个tr。
我不知道我在这里错过了什么。一切看起来都很好。以下是截图 PHP代码<table class="table table-condensed" id="tblareaXP">
<thead>
<tr>
<th colspan="5">Areas of Expertise</th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
$array = array(
"Program Management" => "Program Management",
"Finance Administration" => "Finance Administration",
"Training Facilitation" => "Training Facilitation",
"Operations Logistics" => "Operations Logistics",
"Communications Media" => "Communications Media",
"Monitoring Evaluation" => "Monitoring Evaluation",
"Board Goveranance" => "Board Goveranance",
"Research Learning" => "Research Learning",
"Strategic Planning" => "Strategic Planning",
"Program Design" => "Program Design",
"Other Area" => "Other Area"
);
foreach( $array as $key => $item ){
$i++;
?>
<?php if( $i == 6 or $i == 11 ){ ?><tr><?php } ?>
<td><input type="checkbox" name="prodevxp" value="<?php echo $key; ?>"><label for=""> <?php echo $item; ?></label></td>
<?php if( $i == 6 or $i == 11 ){ ?></tr><?php } ?>
<?php } ?>
</tbody>
</table>
您的代码生成的HTML看起来像这样:
<tbody>
<td><input type="checkbox" name="prodevxp" value="Program Management"><label for=""> Program Management</label></td>
<td><input type="checkbox" name="prodevxp" value="Finance Administration"><label for=""> Finance Administration</label></td>
<td><input type="checkbox" name="prodevxp" value="Training Facilitation"><label for=""> Training Facilitation</label></td>
<td><input type="checkbox" name="prodevxp" value="Operations Logistics"><label for=""> Operations Logistics</label></td>
<td><input type="checkbox" name="prodevxp" value="Communications Media"><label for=""> Communications Media</label></td>
<tr>
<td><input type="checkbox" name="prodevxp" value="Monitoring Evaluation"><label for=""> Monitoring Evaluation</label></td>
</tr>
<td><input type="checkbox" name="prodevxp" value="Board Goveranance"><label for=""> Board Goveranance</label></td>
<td><input type="checkbox" name="prodevxp" value="Research Learning"><label for=""> Research Learning</label></td>
<td><input type="checkbox" name="prodevxp" value="Strategic Planning"><label for=""> Strategic Planning</label></td>
<td><input type="checkbox" name="prodevxp" value="Program Design"><label for=""> Program Design</label></td>
<tr>
<td><input type="checkbox" name="prodevxp" value="Other Area"><label for=""> Other Area</label></td>
</tr>
</tbody>
看到在<tr>中包装的行是如何在自己的行上结束的吗?您真正想要生成的是这样的内容:
<tbody>
<tr>
<td><input type="checkbox" name="prodevxp" value="Program Management"><label for=""> Program Management</label></td>
<td><input type="checkbox" name="prodevxp" value="Finance Administration"><label for=""> Finance Administration</label></td>
<td><input type="checkbox" name="prodevxp" value="Training Facilitation"><label for=""> Training Facilitation</label></td>
<td><input type="checkbox" name="prodevxp" value="Operations Logistics"><label for=""> Operations Logistics</label></td>
<td><input type="checkbox" name="prodevxp" value="Communications Media"><label for=""> Communications Media</label></td>
<td><input type="checkbox" name="prodevxp" value="Monitoring Evaluation"><label for=""> Monitoring Evaluation</label></td>
</tr>
<tr>
<td><input type="checkbox" name="prodevxp" value="Board Goveranance"><label for=""> Board Goveranance</label></td>
<td><input type="checkbox" name="prodevxp" value="Research Learning"><label for=""> Research Learning</label></td>
<td><input type="checkbox" name="prodevxp" value="Strategic Planning"><label for=""> Strategic Planning</label></td>
<td><input type="checkbox" name="prodevxp" value="Program Design"><label for=""> Program Design</label></td>
<td><input type="checkbox" name="prodevxp" value="Other Area"><label for=""> Other Area</label></td>
</tr>
</tbody>
然后将每行包装在<tr>中。那么你是怎么做到的呢?首先，试着把所有项放到一行中:
<tbody>
<tr>
<?php foreach($array as $key => $item): ?>
<td><input type="checkbox" name="prodevxp" value="<?php echo $key; ?>"><label for=""> <?php echo $item; ?></label></td>
<?php endforeach; ?>
</tr>
</tbody>
这是一个好的开始!现在你所需要做的就是让它在最后一行结束，每5列开始一个新的行。幸运的是，这很简单:
<tbody>
<tr>
<?php
$i = 0;
foreach($array as $key => $item) {
if($i > 0 && $i % 5 === 0) {
echo '</tr><tr>';
}
$i++;
?>
<td><input type="checkbox" name="prodevxp" value="<?php echo $key; ?>"><label for=""> <?php echo $item; ?></label></td>
<?php
}
?>
</tr>
</tbody>
很快!但是，我还是要提醒你注意你对桌子的使用。这不是表格数据。的布局。骗子!让我们试着找出另一种方法。看起来你正在使用Bootstrap。我想知道它是否对这个有什么帮助……啊哈!
进入网格系统
浏览一下文档，您应该能够很容易地设置网格。首先，不是用table/tbody，而是用container-fluid来包装整个东西。然后，而不是td s，将每个项目包装在col-md-2或其他东西中。(实际上，在Bootstrap中似乎没有提供五列，但是关于Stack Overflow还有另一个问题。)结果:
<div class="container-fluid">
<?php foreach($array as $key => $item): ?>
<div class="col-md-2"><input type="checkbox" name="prodevxp" value="<?php echo $key; ?>"><label for=""> <?php echo $item; ?></label></div>
<?php endforeach; ?>
</div>
- 在语义上更正确
- 不需要我们保留一个额外的索引变量
- 是响应小屏幕尺寸(我认为)