php - 使用 laravel 在垂直列中动态创建带有标题的 HTML 表？

Question

我一直在四处寻找，但所有关于此问题的答案和文档都是针对不会动态生成所有内容的表。

这是我的 Blade 文件:

@extends('layout')

@section('content')
    <h1>User Profile Data</h1>
        <table class="table table-striped">
        <tr>
            @foreach ($columns as $column => $name)

               <th><strong> {{ $name }} </strong></th>

            @endforeach

            @foreach ($profile as $person)

                @foreach ($person as $name)

                   <td> {{ $name }} </td>

                @endforeach

            @endforeach
        </tr>
        </table>
@stop

一切正常，除了一个问题，头部水平移动，而不是垂直移动。我希望能够自动填充数据库中的数据并将其并排显示。

像这样:

Name: John
Age: 25
Height: 176
etc. 

我错过了什么？

Answer 1

v.1 直接生成垂直表头

当您意识到您的表格在 HTML 中的实际外观，以便具有垂直标题后，这很容易解决。

<h1>User Profile Data</h1>
<table class="table table-striped">
    <tr>
        <th><strong> Name: </strong></th>
        <td> John </td>
        <td> Joane </td>
    </tr>
    <tr>
        <th><strong> Surname: </strong></th>
        <td> Doe </td>
        <td> Donald </td>
    </tr>
    <tr>
        <th><strong> Email: </strong></th>
        <td> john.doe@email.com </td>
        <td> jane@email.com </td>
    </tr>
</table>

了解上述目标后，您只需嵌套 foreach 循环即可填充数据。

对于每一列，您都必须返回配置文件中的匹配数据。 而不是返回 $person->name使用 $person[$col]

要嵌套 foreach，请对您的其他问题使用相同的技术: How to show data from (multidimensional?) arrays with Laravel 5.3 blade

v.2 使用普通表格结合CSS技巧重排表格 导入 twitter bootstrap 并使用 .table-reflow在一张结构良好的 table 上。

生成的表将如下所示，可以使用您的初始 laravel 代码生成:

<table class="table table-striped table-hover table-reflow">
    <thead>
        <tr>
            <th ><strong> Name: </strong></th>
            <th ><strong> Surname: </strong></th>
            <th ><strong> Email: </strong></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> John </td>
            <td> Doe </td>
            <td> john.doe@email.com </td>
        </tr>
        <tr>
            <td> Joane </td>
            <td> Donald </td>
            <td> jane@email.com </td>
        </tr>
    </tbody>
</table>

内容顺序和复杂表格: 请注意，表格重排样式会更改内容的视觉顺序。确保仅将此样式应用于格式良好 和简单的数据表(特别是，不要将其用于布局表)并使用适当的 <th>每行和每列的表格标题单元格。

此外，对于包含跨多行或多列(使用 rowspan 或 colspan 属性)的单元格的表格，此类将无法正常工作。

你应该在这里查看文档:

twitter-bootstrap .table-reflow

编辑:

除了 Kronmark 的优点外，我将把它留给新人。这就是自动表格的样子:

   <table class="table table-striped table-hover table-reflow">
        @foreach($array as $key=>$value)
                <tr>
                    <th ><strong> {{ $key }}: </strong></th>
                    <td>  {{ $value }} </td>
                </tr>
        @endforeach
    </table>

键是表中的标题，值是与之关联的数据点。 IE。全名 = key ，John Magsson = 值。 这是从一个数组中产生的，这个过程应该在这里解释一下:

Blade view not printing data from array

祝你好运。 :)