Создание конкретного макета таблицы с динамическими данными

I need to make a table like this Создание конкретного макета таблицы с динамическими данными

Моя проблема заключается в макет, данные полностью динамическими, как ключи (синим цветом) и значения (в белом), и таблица смонтирована с помощью 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) 
       ) 
      ); 
     }); 
    }); 
});}

источник

2016-11-30 Tiago Damascena

показать нам код, от которого вы получаете фактические таблицы – Mahi

есть ли html- «код» ограничений/макета или вы можете построить таблицу, как вам угодно? –

HI, вы можете сделать что-то похожее на [это] (https://jsfiddle.net/Rohith_KP/xh8o8ozw/4/). Возможно, вам придется добавить дополнительный стиль и код. Но основная идея - создать таблицу на основе файла конфигурации. – Ninjaneer

Вы должны использовать 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

источник

2016-11-30 13:05:23 d345k0

Я пишу код в 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; 
?>

источник

2016-11-30 13:06:41

Создание конкретного макета таблицы с динамическими данными

ответ

Смежные вопросы