借助 PHP 和 HTML 动态创建行和列

Posted 2023-02-24

【中文标题】借助 PHP 和 HTML 动态创建行和列

【英文标题】：Dynamic create rows and colum with the help of PHP and HTML

【发布时间】：2012-04-06 22:40:33

【问题描述】：

我想在 php 和 html 的帮助下创建动态行和列，但我对这段代码有点困惑，所以非常感谢一些帮助。

<table>
<?php
  $tr = 0;
  foreach ($data as $db_data) 
    $tr++;
    if ($tr == 1) 
      echo "<tr>";
      

    echo "<td>";
    echo $db_data['id'];
    echo "</td>";
    

  if($tr == 2)

    
?>
</table>

场景就这么简单：

mysql 数据从 for-each 循环返回 6 条记录，结果将显示如下图

Mysql 数据返回 3 条记录的方式相同，结果将显示如下图

【问题讨论】：

$data 长什么样子？

@pinkypower 我的问题是如何打印这样的

【参考方案1】：

可能是这样的

函数 create_table()

function create_table($data) 
  $res = '<table  border="1">';
  $max_data = sizeof($data);
  $ctr = 1;
  foreach ($data as $db_data) 
    if ($ctr % 2 == 0) $res .= '<td align="center">' . $db_data['id']. '</td></tr>';
    else 
      if ($ctr < $max_data) $res .= '<tr><td align="center">' . $db_data['id']. '</td>';
      else $res .= '<tr><td colspan="2" align="center">' . $db_data['id']. '</td></tr>';
      
    $ctr++;
    
  return $res . '</table>';
  

当然，您可以根据需要修改表格样式。

这样称呼它：

echo create_table($data);

输出

（例如 7、4、3 和 8 个id）

如果您将偶数个 id 传递给函数，则返回每列中具有相同行数的表；如果将奇数个 id 传递给函数，则返回最后一行合并的表。

【讨论】：

我用这个codepad.org/rJGZa3Me检查了你的代码，我得到了答案thanx分享你的经验

一个彻底的答案，即使有截图 - 很好。但是 html 字符串与循环逻辑的融合可能不是最佳的——我们不应该鼓励他们使用单行 PHP 语句将它们分离到模板层吗？

我知道这一点，但使用@Wh1T3h4Ck5 他的回答为我提供了逻辑而不是完整的功能

好吧，我希望它对某人有帮助:-)

【参考方案2】：

使用 % php 运算符（除法余数）在需要的地方分行

【参考方案3】：

做这样的事情：

  foreach ($data as $ord => $db_data)
  
      if (($ord == count($data) - 1) && (count($data) % 2))
      
          // Do a colspan of 2, as it is the last item (first clause)
          // and there are an odd number of items (second clause)
      
  

【讨论】：

你确定在每次循环迭代中计算一个数组是个好主意吗？两次？

使用这种大小的数据将其置于循环之外，您不会注意到任何速度改进，imo。但是，当然，这是可以做到的。

我同意，少量数据没有区别。但是即使对于大型数组，也有人可能认为它是一种模式:)

好吧，这里是免费编辑。我不介意你做出改进:)

顺便说一句，我把所有东西都塞进一行，而不是用$count = count($data) 打破的原因是这是模板层的东西。在实践中，我会将foreach 和if 切换为冒号样式，并将它们分别包装在PHP 标记中。这样一来，渲染逻辑就很轻松，IDE 可以理解 HTML 结构。

【参考方案4】：

我认为您应该尝试在 while 循环中执行此操作。 例如

$sql = your.sql.query;
$row = mysql_query($sql);
$result = mysql_fetch_arrey($row)
<table>
while($row!=0) 
echo "
<tr>
// number of <td> you need according to your data return in the query:
<td>$result['column']</td>
<td>$result['column']</td>
</tr>
";

如果我明白你想要做什么。

【参考方案5】：

这里有一个更好的方法。这个使用 Bootstrap 语法，但您可以轻松地将其更改为 table 格式或其他任何格式。逻辑是一样的。请记住在适当的情况下使用您自己的名称更新$items 数组名称。

<div class="container">
    <div class="row">
        <?php
        // Sample array
        $items = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

        // Define how many columns
        $cols = 4;

        $tdCount = 1; // Don't change
        foreach ($items as $key => $item)
        
            ?>

            <div class="col"><?php echo $key; ?></div>

            <?php
            // Close and open new rows
            if( (($key + 1) % $cols) === 0  && ($key + 1) !== count($items) )
            
                ?>
                </div>
                <div class="row">
                <?php
            

            // Increment column count
            $tdCount++;

            // Fill with empty columns at the end
            if( ($key + 1) === count($items) && $tdCount <= $cols )
            
                $spacers = $cols - $tdCount;
                for ($i = $spacers; $i >= 0 ; $i--)
                
                    ?>
                    <div class="col spacer">&nbsp;</div>
                    <?php
                
            

            // Reset columns count
            if( $tdCount > $cols )
            
                $tdCount = 1;
            
        
    ?>
    </div>
</div>

它会输出：

<div class="container">
    <div class="row">
        <div class="col">0</div>
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>
    <div class="row">
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
    </div>
    <div class="row">
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col spacer">&nbsp;</div>
        <div class="col spacer">&nbsp;</div>
    </div>
</div>