Таблица из CSV

18 октября 2022

Создание таблицы из CSV. Оформление таблицы может быть любым. Преимущество такой таблицы — не надо вручную задавать ни количество столбцов, ни количество строк. Все будет сделано автоматически.

Например, она может выглядеть следующим образом (обязательно посмотрите как это выглядит на мобильном устройстве):

Как это сделать?

Нам понадобятся три HTML-блока (чтобы было проще потом править)

Стили для оформления таблицы (можно менять)
Таблица в формате CSV (нужно менять на свои данные)
JAVASCRIPT-блок (нельзя менять)

1. Стили

<style>
.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width:100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}
.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

/* !Дальше менять не надо! */
@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd !important;
    display: block;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}
</style>

Таблица в формате CSV

- В качестве резделителя - точка с запятой
- Первая строка - заголовки таблицы
- Можно использовать html-теги
- Вы можете создать таблицу в Экселе и экспортировать в csv

<textarea class="source">role;year;production;director;studio;Format;Url
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a>
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a>
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a>
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a>
123;2022;Company name;John Smith;Studio name;Short film;<a href="#">Url</a></textarea>

JAVASCRIPT

ВАЖНО!

Тут надо заменить #section-4882194 и #section-4882256 на ВАШИ ID двух предыдущих HTML-блоков

<div class="output"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {

$("#section-4882194, #section-4882256").css('display','none');

/* !дальше ничего нельзя менять! */
function convertToArray(e,t){var r,a,n,o={headers:null,rows:null},s=0;return t=t||{},t=$.extend(t,{seperator:";",hasHeader:!0,headerPrefix:"COL"}),a=(r=e.split("\n"))[0].split(t.seperator),t.hasHeader?(o.headers=a,o.headers=o.headers.map(function(e){return e.replace(/\//g,"_")}),s=1):o.headers=a.map(function(e,r){return t.headerPrefix+r}),n=o.headers.length,o.rows=r.map(function(e,r){return e.split(t.seperator)}),o}function tag(e,t,r){return"<"+e+" data-label='"+r+"'>"+t+"</"+e+">"}function toHTML(e){var t='<table class="styled-table"><thead>',r=[];return e.map(function(e,a){var n="";e.map(function(e,t){0==a&&(r[t]=e),n+=tag(0===a?"th":"td",e,r[t])}),t+=tag("tr",n)+(0===a?"</thead><tbody>":"")}),t+"</tbody></table>"}function csvToHtml(e,t,r){var a=convertToArray(e.val(),r||{});t.html(toHTML(a.rows))}$(".source").on("change keyup touchend",function(){csvToHtml($source,$output)}),csvToHtml($(".source"),$(".output"));

})
</script>