I’m trying to code a table with infinite horizontal scrolling and I need to assign a certain color pattern the each row, but the start position in such color pattern is not the same for each row.
As you can see in my code, row 0 has as eventListener that toggles its class and applies the color pattern (it’s a 35 cells color pattern).
I need to do it for 5 rows, but I had to attrib colors with 35 nth-child selectors for row 0 alone.
Do I really have to code all those 35 selectors or there’s a better way to do it?
I’m talking about class cRow0 and all those td:nth-child(35n + x).
Rows 1 to 4 have a different approach, and colors are assigned as the cells are created.
The color pattern is defined in:
const mColors = ["red","red","cyan","cyan","lime","lime","lime","lime","lime","red","red","red","lime","lime","lime","lime","lime","lime","cyan","cyan","cyan","lime","lime","lime","lime","lime","red","red","cyan","cyan","lime","lime","lime","lime","lime"];`
As the user scrolls to the left, an eventListener creates 1 cell per row and the color assign follows a correction defined in:
mRow_Correction = [0,1,2,3];
Actually in the final version that correction will be something like
mRow_Correction = [2,0,3,1];
Anyway, in this example I’m assigning colors via
let hCell = document.createElement("td");
iRow_Correction = mRow_Correction[(iRow - 1)];
let sColor = mColors[iRow_Correction];
hCell.setAttribute("style", "background-color: " + sColor + ";");
That seems to work, but the problem is: I don’t want to assign colors as the cells are created. I want to toggle the class, like I do for row 0.
For what I see, I’ll have to code 35 nth-child selectors for each row, but there should be a better way to do it… or there isn’t?…
var iColumns = 1, iShift = 0;
const mColors = ["red","red","cyan","cyan","lime","lime","lime","lime","lime","red","red","red","lime","lime","lime","lime","lime","lime","cyan","cyan","cyan","lime","lime","lime","lime","lime","red","red","cyan","cyan","lime","lime","lime","lime","lime"];
const hRow0 = document.getElementById("idRow0");
hRow0.addEventListener("click", function() {
hRow0.classList.toggle("cRow0");
});
const hDiv_Table = document.querySelector("#idDiv_Table");
hDiv_Table.addEventListener("scroll", () => {
if (hDiv_Table.scrollLeft + hDiv_Table.clientWidth >= hDiv_Table.scrollWidth) fCreate_Cell();
});
for (let iColumn = 1; iColumn < 11; iColumn++){
fCreate_Cell();
}
function fCreate_Cell() {
let iRow_Correction, mRow_Correction = [0,1,2,3];
let iColumn = iColumns;
for (let iRow = 0; iRow < 5; iRow++){
let hRow = document.getElementById("idRow" + iRow);
let sID = "r" + iRow + "c" + iColumn;
let hCell = document.createElement("td");
hCell.setAttribute("id", sID);
hRow.appendChild(hCell);
if (iRow == 0) {
hCell.innerHTML = "col " + iColumns;
} else {
iRow_Correction = mRow_Correction[(iRow - 1)];
((iRow_Correction + iShift) < 35) ? iRow_Correction += iShift: iRow_Correction = (iRow_Correction + iShift) - 35;
let sColor = mColors[iRow_Correction];
hCell.innerHTML = "col " + iColumns + "<br>" + sColor;
hCell.setAttribute("style", "background-color: " + sColor + ";");
}
}
(iShift < 34) ? iShift++ : iShift = 0;
iColumns++;
} html {
text-align: center;
}
.cDiv_Main {
width:100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
margin: 0;
}
.cDiv_Title {
width: 100%;
height: 15%;
border: 1px solid black;
background-color: blue;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
flex-direction: column;
}
.cDiv_Table {
width: 100%;
height: 85%;
overflow: auto;
}
.cDiv_Main table {
width: 100%;
height: 100%;
border-spacing: 0;
}
table tr {
height: 20%;
}
table td {
min-width: 50px;
min-height: 20px;
border: 1px solid black;
}
.cColum_Fixed_Row_Odd, .cColum_Fixed_Row_Even {
position: -webkit-sticky;
position: sticky;
left: 0;
font-weight: bold;
}
.cTable_Main tr:nth-child(2n+1) {
background-color: white;
}
.cTable_Main tr:nth-child(2n) {
background-color: lightgray;
}
.cColum_Fixed_Row_Odd {
background: white;
}
.cColum_Fixed_Row_Even {
background: lightgray;
}
.cRow0 td:nth-child(35n + 2),
.cRow0 td:nth-child(35n + 3) {
background-color: red;
}
.cRow0 td:nth-child(35n + 4),
.cRow0 td:nth-child(35n + 5) {
background-color: cyan;
}
.cRow0 td:nth-child(35n + 6),
.cRow0 td:nth-child(35n + 7),
.cRow0 td:nth-child(35n + 8),
.cRow0 td:nth-child(35n + 9),
.cRow0 td:nth-child(35n + 10) {
background-color: lime;
}
.cRow0 td:nth-child(35n + 11),
.cRow0 td:nth-child(35n + 12),
.cRow0 td:nth-child(35n + 13) {
background-color: red;
}
.cRow0 td:nth-child(35n + 14),
.cRow0 td:nth-child(35n + 15),
.cRow0 td:nth-child(35n + 16),
.cRow0 td:nth-child(35n + 17),
.cRow0 td:nth-child(35n + 18),
.cRow0 td:nth-child(35n + 19) {
background-color: lime;
}
.cRow0 td:nth-child(35n + 20),
.cRow0 td:nth-child(35n + 21),
.cRow0 td:nth-child(35n + 22) {
background-color: cyan;
}
.cRow0 td:nth-child(35n + 23),
.cRow0 td:nth-child(35n + 24),
.cRow0 td:nth-child(35n + 25),
.cRow0 td:nth-child(35n + 26),
.cRow0 td:nth-child(35n + 27) {
background-color: lime;
}
.cRow0 td:nth-child(35n + 28),
.cRow0 td:nth-child(35n + 29) {
background-color: red;
}
.cRow0 td:nth-child(35n + 30),
.cRow0 td:nth-child(35n + 31) {
background-color: cyan;
}
.cRow0 td:nth-child(35n + 32),
.cRow0 td:nth-child(35n + 33),
.cRow0 td:nth-child(35n + 34),
.cRow0 td:nth-child(35n + 35),
.cRow0 td:nth-child(35n + 36) {
background-color: lime;
} <div id="idDiv_Main" class="cDiv_Main">
<div id="idDiv_Title" class="cDiv_Title">INFINITE HORIZONTAL SCROLLING</div>
<div id="idDiv_Table" class="cDiv_Table">
<table id="idTable_Main" class="cTable_Main">
<tbody>
<tr id="idRow0">
<td class="cColum_Fixed_Row_Odd">ROW 0</td>
</tr>
<tr id="idRow1">
<td class="cColum_Fixed_Row_Even">ROW 1</td>
</tr>
<tr id="idRow2">
<td class="cColum_Fixed_Row_Odd">ROW 2</td>
</tr>
<tr id="idRow3">
<td class="cColum_Fixed_Row_Even">ROW 3</td>
</tr>
<tr id="idRow4">
<td class="cColum_Fixed_Row_Odd">ROW 4</td>
</tr>
</tbody>
</table>
</div>
</div>