I have a table that has 5 TH's then there is a variable amount of TR's that all contain 5 TD's. I want to assign a data-label to each set of TD's with the value of the set of TH's.
This is the result I want
<table class="table" id="basket">
<thead>
<tr>
<th>Item name</th>
<th>Type</th>
<th>Price</th>
<th class="middlecolumnbasket">Frequency</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Item name">Product 1</td>
<td data-label="Type">Download</td>
<td data-label="Price">€4.99 </td>
<td data-label="Frequency">Each month</td>
<td data-label="Remove" align="center">
<input type="checkbox" name="delete244113" value="1">
</td>
</tr>
<tr>
<td data-label="Item name">Product 2</td>
<td data-label="Type">Download</td>
<td data-label="Price">€99.99 </td>
<td data-label="Frequency">Each year</td>
<td data-label="Remove" align="center">
<input type="checkbox" name="delete245466" value="1">
</td>
</tr>
<tr>
<td data-label="Item name">Product 3</td>
<td data-label="Type">Download</td>
<td data-label="Price">€99.99 </td>
<td data-label="Frequency">Each year</td>
<td data-label="Remove" align="center">
<input type="checkbox" name="delete253047" value="1">
</td>
</tr>
<tr>
<td data-label="Item name">Product 4</td>
<td data-label="Type">Download</td>
<td data-label="Price">€29.99 </td>
<td data-label="Frequency">Each year</td>
<td data-label="Remove" align="center">
<input type="checkbox" name="delete253053" value="1">
</td>
</tr>
<tr>
<td data-label="Item name">Product 5</td>
<td data-label="Type">Download</td>
<td data-label="Price">€49.99 </td>
<td data-label="Frequency">Each year</td>
<td data-label="Remove" align="center">
<input type="checkbox" name="delete253055" value="1">
</td>
</tr>
</tbody>
But I can only get the first set of TD's
This is my code
var tr = document.getElementsByTagName('tr');
for (var a = 0; a < tr.length; a++) {
var td = document.getElementsByTagName('td');
for (var b = 0; b < td.length; b++) {
var th = document.getElementsByTagName('th');
for (var c = 0; c < th.length; c++) {
var content = th[c].innerHTML;
td[c].setAttribute("data-label", content);
}
}
}
<table class="table" id="basket">
<thead>
<tr>
<th>Item name</th>
<th>Type</th>
<th>Price</th>
<th class="middlecolumnbasket">Frequency</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>Download</td>
<td>€4.99 </td>
<td>Each month</td>
<td align="center">
<input type="checkbox" name="delete244113" value="1">
</td>
</tr>
<tr>
<td>Product 2</td>
<td>Download</td>
<td>€99.99 </td>
<td>Each year</td>
<td align="center">
<input type="checkbox" name="delete245466" value="1">
</td>
</tr>
<tr>
<td>Product 3</td>
<td>Download</td>
<td>€99.99 </td>
<td>Each year</td>
<td align="center">
<input type="checkbox" name="delete253047" value="1">
</td>
</tr>
<tr>
<td>Product 4</td>
<td>Download</td>
<td>€29.99 </td>
<td>Each year</td>
<td align="center">
<input type="checkbox" name="delete253053" value="1">
</td>
</tr>
<tr>
<td>Product 5</td>
<td>Download</td>
<td>€49.99 </td>
<td>Each year</td>
<td align="center">
<input type="checkbox" name="delete253055" value="1">
</td>
</tr>
</tbody>
</table>
I was hoping to do it in plain JavaScript. Thank you!