So I have table:
<table class="checkout-list">
<thead>
<tr>
<th class="checkout-title">item</th>
<th class="checkout-title">amount</th>
<th class="checkout-title">total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkout-info"></td>
<td class="checkout-info"></td>
<td class="checkout-info"></td>
</tr>
<tr>
<td class="checkout-info"></td>
<td class="checkout-info"></td>
<td class="checkout-info"></td>
</tr>
</tbody>
</table>
And with javascript I want to take values from thead tr th and set them to tbody tr td as attributes.
I tried this:
let title = [];
document.querySelectorAll('.checkout-title').forEach(el => {
title.push(el.innerHTML);
});
document.querySelectorAll('.checkout-info').forEach((el, index) => {
el.setAttribute('data-title', title[index]);
});
Bus as it is now I only manage to assign values to first tbody tr td child and second left with undefined it looks like this:
<tbody>
<tr>
<td class="checkout-info" data-title="item"></td>
<td class="checkout-info" data-title="amount"></td>
<td class="checkout-info" data-title="total"></td>
</tr>
<tr>
<td class="checkout-info" data-title="undefined"></td>
<td class="checkout-info" data-title="undefined"></td>
<td class="checkout-info" data-title="undefined"></td>
</tr>
</tbody>
How I should fix this undefined assignation?
The issue with the code is, there are only three nodes with querySelector document.querySelectorAll('.checkout-title') and six nodes with querySelector document.querySelectorAll('.checkout-info'). That's why there is value for first 3 nodes and undefined for last three nodes.
You have to access nodes from title array with title[index % header.length] so that it will loop through the title twice and assign the attribute correctly
let title = [];
const header = document.querySelectorAll('.checkout-title');
header.forEach(el => {
title.push(el.innerHTML);
});
const nodes = document.querySelectorAll('.checkout-info');
nodes.forEach((el, index) => {
el.setAttribute('data-title', title[index % header.length]);
});<table class="checkout-list">
<thead>
<tr>
<th class="checkout-title">item</th>
<th class="checkout-title">amount</th>
<th class="checkout-title">total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkout-info"></td>
<td class="checkout-info"></td>
<td class="checkout-info"></td>
</tr>
<tr class="delivery_price">
<td class="checkout-info"></td>
<td class="checkout-info"></td>
<td class="checkout-info"></td>
</tr>
</tbody>
</table>