Прокручиваемая таблица поворота с заблокированными столбцами ⇐ Html

[Anonymous]

Я сталкиваюсь с проблемой с созданием поворотной таблицы, в которой всегда заблокированы первые столбцы (и она разворачивается, показывая дальнейшие строки, когда соответствующая черная область нажимается). < /p>
Требования есть:

[*] Первый столбец должен быть заблокирован (столбцы со значениями; suish afregning medie )
[*] Колонка ordredetaljer , когда его развернут, также должна быть Заблокирован (столбцы со значениями; usd x и order y )
ol>
Я ценю любой вход. = "Snippet-Code-JS Lang-JS PrettyPrint-Override">

Код: Выделить всё

// Utility: pad numbers with a leading zero if needed
function pad(n) {
return n < 10 ? '0' + n : n;
}

// Format a Date object as dd-mm-yy
function formatDate(date) {
var d = pad(date.getDate());
var m = pad(date.getMonth() + 1);
var y = String(date.getFullYear()).slice(2);
return d + '-' + m + '-' + y;
}

// Generate an array of date strings given a start date and number of days
function generateDates(startDate, numDays) {
var dates = [];
var current = new Date(startDate);
for (var i = 0; i < numDays; i++) {
dates.push(formatDate(current));
current.setDate(current.getDate() + 1);
}
return dates;
}

document.addEventListener("DOMContentLoaded", function() {
// Define our month: March 2025 (31 days)
var dates = generateDates("2025-03-01", 31);
var numDates = dates.length;

// Define groups and their data functions (dummy/deterministic data)
var groups = [{
name: "Group A",
orders: 10,
rows: [{
label: "Afregning medie",
valueFunc: function(dayIndex) {
return 100 + dayIndex * 5;
}
},
{
label: "Provision sælger",
valueFunc: function(dayIndex) {
return 50 + dayIndex * 3;
}
}
],
detailOrders: [{
name: "Order 1",
valueFunc: function(dayIndex) {
return 30 + dayIndex * 2;
}
},
{
name: "Order 2",
valueFunc: function(dayIndex) {
return 70 + dayIndex * 3;
}
}
]
},
{
name: "Group B",
orders: 5,
rows: [{
label: "Afregning medie",
valueFunc: function(dayIndex) {
return 80 + dayIndex * 4;
}
},
{
label: "Provision sælger",
valueFunc: function(dayIndex) {
return 40 + dayIndex * 2;
}
}
],
detailOrders: [{
name: "Order A",
valueFunc: function(dayIndex) {
return 40 + dayIndex * 1;
}
},
{
name: "Order B",
valueFunc: function(dayIndex) {
return 60 + dayIndex * 2;
}
}
]
},
{
name: "Group C",
orders: 8,
rows: [{
label: "Afregning medie",
valueFunc: function(dayIndex) {
return 90 + dayIndex * 3;
}
},
{
label: "Provision sælger",
valueFunc: function(dayIndex) {
return 45 + dayIndex * 2;
}
}
],
detailOrders: [{
name: "Order X",
valueFunc: function(dayIndex) {
return 50 + dayIndex * 2;
}
},
{
name: "Order Y",
valueFunc: function(dayIndex) {
return 70 + dayIndex * 3;
}
}
]
}
];

// Build main table header dynamically
var theadHTML = '';
theadHTML += 'Periode';
for (var i = 0; i < numDates; i++) {
theadHTML += '' + dates[i] + '';
}
theadHTML += 'Sum';
theadHTML += '';
document.getElementById('main-thead').innerHTML = theadHTML;

var tbodyHTML = '';
// Global totals for each date column
var globalTotals = new Array(numDates).fill(0);
var totalOrders = 0;

// Generate table rows for each group
groups.forEach(function(group, groupIndex) {
totalOrders += group.orders;
// Group header row
tbodyHTML += '';
tbodyHTML += '' + group.name + ' (' + group.orders + ' orders) ▼';
tbodyHTML += '';
tbodyHTML += '';

// Group data rows (e.g.  "Afregning medie" and "Provision sælger")
group.rows.forEach(function(rowData) {
var rowSum = 0;
tbodyHTML += '';
tbodyHTML += '' + rowData.label + '';
for (var d = 0; d < numDates; d++) {
var cellValue = rowData.valueFunc(d);
rowSum += cellValue;
globalTotals[d] += cellValue; // update global totals
tbodyHTML += '' + cellValue + '';
}
tbodyHTML += '' + rowSum + '';
tbodyHTML += '';
});

// Detail (pivot) table row for this group (hidden by default)
tbodyHTML += '';
tbodyHTML += '';
tbodyHTML += '';
tbodyHTML += '';
// Detail table header
tbodyHTML += '';
tbodyHTML += 'Ordredetaljer';
for (var d = 0; d < numDates; d++) {
tbodyHTML += '' + dates[d] + '';
}
tbodyHTML += 'Sum';
tbodyHTML += '';
// Rows for each order in the detail table
group.detailOrders.forEach(function(order) {
var orderSum = 0;
tbodyHTML += '';
tbodyHTML += '' + order.name + '';
for (var d = 0; d < numDates; d++) {
var orderValue = order.valueFunc(d);
orderSum += orderValue;
tbodyHTML += '' + orderValue + '';
}
tbodyHTML += '' + orderSum + '';
tbodyHTML += '';
});
tbodyHTML += '';
tbodyHTML += '';
});

// Generate a total row that sums each column from all group data rows
var totalRowHTML = '';
totalRowHTML += 'Total (' + totalOrders + ' orders)';
var overallSum = 0;
for (var d = 0; d < numDates; d++) {
totalRowHTML += '' + globalTotals[d] + '';
overallSum += globalTotals[d];
}
totalRowHTML += '' + overallSum + '';
totalRowHTML += '';

tbodyHTML += totalRowHTML;
document.getElementById('main-tbody').innerHTML = tbodyHTML;

// Add click event listeners to group header rows to toggle detail rows
var headerRows = document.querySelectorAll('.group-header');
headerRows.forEach(function(header) {
header.addEventListener('click', function() {
var group = this.getAttribute('data-group');
var detailRow = document.querySelector('.detail-row[data-group="' + group + '"]');
if (detailRow) {
if (detailRow.style.display === 'none' || detailRow.style.display === '') {
detailRow.style.display = 'table-row';
// Change arrow from ▼ to ▲
this.cells[0].textContent = this.cells[0].textContent.replace('▼', '▲');
} else {
detailRow.style.display = 'none';
this.cells[0].textContent = this.cells[0].textContent.replace('▲', '▼');
}
}
});
});
});< /code>
body {
font-family: Arial, sans-serif;
font-size: 14px;
margin: 20px;
}

.table-container {
overflow-x: auto;
}

table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}

th,
td {
border: 1px solid #ccc;
padding: 4px 8px;
white-space: nowrap;
}

th {
background-color: #eaeaea;
font-weight: bold;
}

/* Sticky first column */
.sticky {
position: sticky;
left: 0;
background-color: #fff;
z-index: 2;
}

/* Group header row styling */
.group-header {
background-color: #000;
color: #fff;
cursor: pointer;
}

/* Detail table container for horizontal scrolling */
.detail-container {
overflow-x: auto;
position: relative;
}

.detail-table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}

.detail-table th,
.detail-table td {
border: 1px solid #ddd;
padding: 4px 8px;
white-space: nowrap;
}

/* Sticky first column in detail table */
.detail-table .sticky {
position: sticky;
left: 0;
background-color: #f0f0f0;
z-index: 10;
border-right: 2px solid #ccc;
}

/* Hide detail (pivot) rows by default */
.detail-row {
display: none;
}

.total-row {
font-weight: bold;
background-color: #ddd;
}< /code>




Pivot Table - Month's Worth of Data



Pivot Table - Month's Worth of Data

Подробнее здесь: https://stackoverflow.com/questions/794 ... ed-columns