动态HTML表格的td和tr视情况而异

Question

我将值存储在数组中，然后遍历它，并根据条件创建动态HTML td和tr depedning。 当循环无效值分别为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="">&nbsp;<?php echo $item; ?></label></td>
      <?php if( $i == 6 or $i == 11 ){ ?></tr><?php } ?>
      <?php } ?>
    </tbody>
  </table>

Answer 1

您的代码生成的HTML看起来像这样：

<tbody>
    <td><input type="checkbox" name="prodevxp" value="Program Management"><label for="">&nbsp;Program Management</label></td>
    <td><input type="checkbox" name="prodevxp" value="Finance Administration"><label for="">&nbsp;Finance Administration</label></td>
    <td><input type="checkbox" name="prodevxp" value="Training  Facilitation"><label for="">&nbsp;Training  Facilitation</label></td>
    <td><input type="checkbox" name="prodevxp" value="Operations  Logistics"><label for="">&nbsp;Operations  Logistics</label></td>
    <td><input type="checkbox" name="prodevxp" value="Communications  Media"><label for="">&nbsp;Communications  Media</label></td>
    <tr>
        <td><input type="checkbox" name="prodevxp" value="Monitoring  Evaluation"><label for="">&nbsp;Monitoring  Evaluation</label></td>
    </tr>
    <td><input type="checkbox" name="prodevxp" value="Board Goveranance"><label for="">&nbsp;Board Goveranance</label></td>
    <td><input type="checkbox" name="prodevxp" value="Research  Learning"><label for="">&nbsp;Research  Learning</label></td>
    <td><input type="checkbox" name="prodevxp" value="Strategic Planning"><label for="">&nbsp;Strategic Planning</label></td>
    <td><input type="checkbox" name="prodevxp" value="Program Design"><label for="">&nbsp;Program Design</label></td>
    <tr>
        <td><input type="checkbox" name="prodevxp" value="Other Area"><label for="">&nbsp;Other Area</label></td>
    </tr>
</tbody>

看看包裹在<tr>的行如何以自己的行结束？ 您真正想要生成的是这样的：

<tbody>
    <tr>
        <td><input type="checkbox" name="prodevxp" value="Program Management"><label for="">&nbsp;Program Management</label></td>
        <td><input type="checkbox" name="prodevxp" value="Finance Administration"><label for="">&nbsp;Finance Administration</label></td>
        <td><input type="checkbox" name="prodevxp" value="Training  Facilitation"><label for="">&nbsp;Training  Facilitation</label></td>
        <td><input type="checkbox" name="prodevxp" value="Operations  Logistics"><label for="">&nbsp;Operations  Logistics</label></td>
        <td><input type="checkbox" name="prodevxp" value="Communications  Media"><label for="">&nbsp;Communications  Media</label></td>
        <td><input type="checkbox" name="prodevxp" value="Monitoring  Evaluation"><label for="">&nbsp;Monitoring  Evaluation</label></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="prodevxp" value="Board Goveranance"><label for="">&nbsp;Board Goveranance</label></td>
        <td><input type="checkbox" name="prodevxp" value="Research  Learning"><label for="">&nbsp;Research  Learning</label></td>
        <td><input type="checkbox" name="prodevxp" value="Strategic Planning"><label for="">&nbsp;Strategic Planning</label></td>
        <td><input type="checkbox" name="prodevxp" value="Program Design"><label for="">&nbsp;Program Design</label></td>
        <td><input type="checkbox" name="prodevxp" value="Other Area"><label for="">&nbsp;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="">&nbsp;<?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="">&nbsp;<?php echo $item; ?></label></td>
    <?php
        }
    ?>
    </tr>
</tbody>

快点！ 但是，我还是要召唤您使用表。 那不是表格数据。 那是布局。 骗子！ 因此，让我们尝试找出如何以其他方式执行此操作。 看来您正在使用Bootstrap。 我想知道这是否对您有帮助...啊哈！

进入网格系统

简要浏览文档 ，您应该能够轻松建立网格。 首先，将整个东西包装在一个container-fluid ，而不是table / tbody 。 然后，而不是td ，将每个项目包装在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="">&nbsp;<?php echo $item; ?></label></div>
<?php endforeach; ?>
</div>

这个解决方案

• 在语义上更正确
• 不需要我们保留额外的索引变量
• 对小尺寸的屏幕有反应（我认为）
• 更好