动态HTML表td和tr根据条件不能正常工作

时间:2014-07-27 00:50:19

标签: php html html-table

我'我将值存储在一个数组中,然后循环遍历它并创建动态HTML td和tr depedning条件。当循环增量值为6和11时,表tr应该断开到下一个tr。

我'我不确定我是什么'我在这里失踪了。一切看起来都不错。这是screenshots

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>

1 个答案:

答案 0 :(得分:0)

您的代码生成如下所示的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>

的Presto!但是,我还是要叫你出去使用桌子。这不是表格数据。这是布局。骗子!所以让我们试着弄清楚如何以不同的方式做到这一点。看起来你正在使用Bootstrap。 我想知道它是否有任何帮助... aha!

输入the grid system

通过the documentation简要略读,你应该可以很容易地设置一个网格。首先,而不是table / tbody,将整个内容包装在container-fluid中。然后,而不是td s,将每个项目包装在col-md-2或其他内容中。 (实际上,似乎Bootstrap中没有五列的规定,但是another question on Stack Overflow for that。)结果:

<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>

此解决方案

  • 在语义上更正确
  • 不要求我们保留额外的索引变量
  • 响应小屏幕尺寸(我认为)
  • 更好