I am attempting to modify a piece of JavaScript code in order to locate all checkboxes, assign names to them, and then add label attributes with CSS for accessibility purposes.
Here is the snippet of my existing code:
<tr class="el-table__row">
...
</tr>
This is how I am currently trying to achieve it using JavaScript:
document.querySelectorAll('el-table__body .el-table__row').forEach(function (item, v) {
var chks = document.getElementsByClassName('el-checkbox__original');
for (var i = 0; i < chks.length; i++) {
chks[i].name = 'check_' + item.innerHTML;
}
});
I want the final result to look like this:
<tr class="el-table__row">
...
<label for="check_1" style="position:absolute;z-index:-9999;">select this row</label>
...
</tr>
The goal is to add the name="check_1" attribute to each checkbox within a loop. Additionally, I aim to insert the following line after the span tag:
<label for="check_1" style="position:absolute;z-index:-9999;">select this row</label>
However, I am unsure of how to target the label tag after the span tag. Can anyone provide guidance?