With this table,
<table >
<colgroup>
<col class="classname1">
...
</colgroup>
<thead>
<tr>
<th class="classname2" scope="col">title</th>
...
</tr>
</thead>
<tbody>
I can get the class name specified explicitly on the table header (th) by calling
th = document.querySelector...
th.classList // contains classname2 but not classname1
Given th, I want to obtain all classnames that apply. How can I get the class names specified in the corresponding colgroup?
An approach was to retrieve ...
within a first step the column specific class-names (as array of class-name arrays) while also taking a col-elements span-property into account.
and within a final step, while iterating the direct child-elements of a specific table-row, to create the array of each child-element's effective class-names array by merging the current element's class-names with the class-names of its related col-element (this time taking into account a child-element's colSpan-property).
function getColumnSpecificClassNames(elmTable) {
return [
...elmTable
.querySelectorAll('colgroup > col')
]
.reduce((result, { span, classList }) => {
while (span--) {
result
.push([...classList]);
}
return result;
}, []);
}
function getRowChildrenEffectiveClassNames(elmTr) {
const columnClassLists = getColumnSpecificClassNames(
elmTr.closest('table')
);
return [
...elmTr.children
]
.reduce(({ result, colCount = 0 }, { colSpan, classList }) => {
result
.push([...columnClassLists[colCount], ...classList]);
return { result, colCount: colCount + colSpan };
}, { result: [] }).result;
}
console.log(
'column specifc class names ...',
getColumnSpecificClassNames(
document.querySelector('table')
),
)
console.log(
'row children effective class names ...',
getRowChildrenEffectiveClassNames(
document.querySelector('table > tbody > tr')
),
).batman {
background-color: #d7d9f2;
}
.flash {
background-color: #ffe8d4;
}
caption {
padding: 8px;
caption-side: bottom;
}
table {
width: 49%;
border-collapse: collapse;
border: 2px solid rgb(100, 100, 100);
letter-spacing: 1px;
font-family: sans-serif;
font-size: 0.7rem;
}
td,
th {
border: 1px solid rgb(100, 100, 100);
padding: 10px 10px;
}
td {
text-align: center;
}
.as-console-wrapper {
left: auto!important;
min-height: 100%;
width: 50%;
}<table>
<caption>
<p>Superheros and sidekicks<P>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup">
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup
</a>
</caption>
<colgroup>
<col />
<col span="2" class="batman" />
<col span="2" class="flash" />
</colgroup>
<tr>
<td> </td>
<th scope="col">Batman</th>
<th scope="col" class="robin">Robin</th>
<th scope="col">The Flash</th>
<th scope="col" class="kid-flash">Kid Flash</th>
</tr>
<tr>
<th scope="row">Skill</th>
<td>Smarts</td>
<td>Dex, acrobat</td>
<td>Super speed</td>
<td>Super speed</td>
</tr>
</table>