Question

我的问题是布局，数据是完全动态的，包括键（蓝色）和值（白色），表格用jquery挂载。

任何人都知道如何尽可能接近这个结果？

这是我的jquery代码：

function loadRelatos(json) {
$.getJSON(json, function (radoc) {
    $('#ano-base').text(radoc.anoBase);

    var relatorio = $('#relatorio');

    $.each(radoc.relatos, function (key, value) {
        var repetido = false;
        var relato;
        $('[id^="relato-"]').each(function () {
            if(value.classe === $(this).find('.cabecalho-relato a').text()) {
                relato = $(this);
                repetido = true;
                return false;
            }
        });

        if(!repetido) {
            relatorio.append(
                $(document.createElement('div')).addClass('row relato').attr('id', 'relato-'+key)
            );
            relato = $('#relato-'+key);
            relato.append(
                $(document.createElement('div')).addClass('cabecalho-relato').append(
                    $(document.createElement('a')).text(value.classe)
                )
            );
        }

        relato.append(
            $(document.createElement('table')).addClass('conteudo-relato').attr('id', 'conteudo-'+key)
        );

        var conteudo = relato.find('#conteudo-'+key);
        $.each(value.atributos, function (key, value) {
            conteudo.append(
                $(document.createElement('tr')).addClass('atributo').append(
                    $(document.createElement('td')).addClass('atributo-key').text(key+':'),
                    $(document.createElement('td')).addClass('atributo-value').text(value)
                )
            );
        });
    });
});}

Answer 1

您应该使用colspan属性，该属性跨越两列或更多列

<table>
  <thead>
    <tr>
      <th scope="col">Lorem</th>
      <th scope="col">Ipsum</th>
      <th scope="col">Dolor</th>
      <th scope="col">Sit</th>
      <th scope="col">Amet</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Amet</td>
      <td>Sit</td>
      <td>Dolor</td>
      <td>Ipsum</td>
      <td>Lorem</td>
    </tr>
    <tr>
      <td rowspan="2">Amet</td>
      <td colspan="2">Sit</td>
      <td>Ipsum</td>
      <td>Lorem</td>
    </tr>

    <tr>
      <td>Sit</td>
      <td>Dolor</td>
      <td>Ipsum</td>
      <td>Lorem</td>
    </tr>
  </tbody>
</table>

Example

Answer 2

我用PHP编写代码。您可以将其转换为您想要的任何语言

<?php
$data; //Hava data array
$res = "";
$res . = "<table>";
foreach($data as $val) 
{
    $res . = "<tr>";
    $res . = "<td>".$val['id']."</td>";
    $res . = "<td>".$val['Name']."</td>";
    $res . = "<td>".$val['status']."</td>";
    $res . = "</tr>";
}
$res . = "</table>";
echo $res;
?>

使用动态数据制作特定的表格布局

2 个答案: