Automatically Add name=“blah” tag to nth <td> in a <tr>

Question

I have a page with many <tr> each containing multiple <td> .

I want to automatically add name="blah" tags to each <td> in the row via CSS or JavaScript.

So in effect, each <td> will go from:

<tr>
<td>Col 1 Text</td>
<td>Col 2 Text</td>
<td>Col 3 Text</td>
</tr>

To:

<tr>
<td name="col1">Col 1 Text</td>
<td name="col2">Col 2 Text</td>
<td name="col3">Col 3 Text</td>
</tr>

I need to do this because I have some JavaScript that formats the cells according to their contents, and that searches for the cells by the <td> name.

Any ideas how I can achieve this? Thanks.

Answer 1

Use setAttribute()

 var tds = document.querySelectorAll('td'); for (var i = 0; i < tds.length; i++) { tds[i].setAttribute('name', 'col' + (i + 1)); } 

 td[name]{ background:green; } 

 <table> <tr> <td>Col 1 Text</td> <td>Col 2 Text</td> <td>Col 3 Text</td> </tr> </table> 

Answer 2

var cells = document.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
    cells[i].setAttribute("name", "col" + i+1);
}

Answer 3

if you want this style

<tr>
    <td name="col1"></td>
    <td name="col2"></td>
</tr>
<tr>
    <td name="col1"></td>
    <td name="col2"></td>
</tr>

apply this JS

var tr = document.getElementsByTagName("tr");
for(var i=0; i<tr.length; ++i) {
    var td = tr[i].getElementsByTagName("td");
    for(vat j=0; j<td.length; ++j) {
        td[j].setAttribute("name","col"+(j+1));
    }
}

if you want this style

<tr>
    <td name="col1"></td>
    <td name="col2"></td>
</tr>
<tr>
    <td name="col3"></td>
    <td name="co42"></td>
</tr>

apply this JS

var td = document.getElementsByTagName("td");
for(var i=0; i<td.length; ++i) {
    td[i].setAttribute("name","col"+(i+1));
}