CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tiago Damascena
Tiago Damascena

Reputation: 86

Making a specific table layout with dynamic data

I need to make a table like this

And actually i have this

My problem is the layout, the data is totally dynamic, both the keys (in blue) and the values (in white), and the table is mounted with a jquery.

Anyone have an idea how I can get as close to this result as possible?

Here is my jquery code:

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)
                )
            );
        });
    });
});}

Upvotes: 0

Views: 87

Answers (2)

rajausman haider
rajausman haider

Reputation: 580

I write the code in PHP. You can convert it whichever language you want

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

Upvotes: 0

d345k0
d345k0

Reputation: 78

You should use colspan property, that spans two or more columns columns

<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

Upvotes: 1

Related Questions