Я хочу создать динамический заголовок таблицы, текст и нижний колонтитул.
Таблица должна выглядеть примерно так
Теперь вВ приведенной выше таблице все имена динамических заголовков, такие как цикл Наблюдения и комментарии, являются фиксированными, даже имя статуса (%) также исправлено.Но продукт 01, продукт 02 являются динамическими, а система 01, система 02 и проект 01 и итоговые значения являются динамическими заголовками.
Столбцы «Цикл» и «Наблюдение» также являются динамическими, и в «Наблюдении» некоторый цикл может иметь 10 наблюдений, а некоторые могут иметьтри или четыре.
Я создал базовую таблицу в приведенной ниже ссылке, но мне кажется, что мне не хватает некоторых при создании структуры json для этой таблицы.
Демонстрация таблицы
<!DOCTYPE html>
<html>
<head>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="src/main.js"></script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th rowspan="4">Cycle</th>
<th rowspan="4">Observation</th>
<th colspan="24">Status (%)</th>
<th rowspan="4">Comment</th>
</tr>
<tr>
<th colspan="12">Product 01</th>
<th colspan="12">Product 02</th>
</tr>
<tr>
<th colspan="6">System 01</th>
<th colspan="6">System 02</th>
<th colspan="6">System 01</th>
<th colspan="6">System 02</th>
</tr>
<tr>
<th>Project 01</th>
<th>Project 02</th>
<th>Project 03</th>
<th>Project 04</th>
<th>Project 05</th>
<th>Total</th>
<th>Project 01</th>
<th>Project 02</th>
<th>Project 03</th>
<th>Project 04</th>
<th>Project 05</th>
<th>Total</th>
<th>Project 01</th>
<th>Project 02</th>
<th>Project 03</th>
<th>Project 04</th>
<th>Project 05</th>
<th>Total</th>
<th>Project 01</th>
<th>Project 02</th>
<th>Project 03</th>
<th>Project 04</th>
<th>Project 05</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="12">Project Initiation</td>
<td>Release Description Document (Release Plan)</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td>Repository</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td>Document</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td>Estimate</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td>Conformance</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td>Project</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td>Test</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td>Presentation</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td>Product</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td>Charter</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total 1</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
<tr>
<td colspan="2">Total 2</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td>10%</td>
<td>30%</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>100%</td>
<td> All is Good</td>
</tr>
</tfoot>
</table>
</body>
</html>
Так что это моя просьба, пожалуйста, укажите, как лучше создать вышеуказанную таблицу и json для этой таблицы.