Question

The code below shows a rendered HTML (from Compiled ASP .Net code). I would not be able to make any changes to it including adding new attributes like ID.

I could still do something with Javascript but because there is no unique ID for the column, I could not replace the underscore text “____________” with some other text.

The plan is to replace the underscore in column 3 for each row with some other text. Is there a way to identify Column 3 with Javascript?

Thank you.

    <table width='100%'>
        <tr>
            <td align="left" valign="top" class='clsReadOnly'>Row 1
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                abc
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                __________________________
            </td>
        </tr>
        <tr>
            <td align="left" valign="top" class='clsReadOnly'>Row 2
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                def
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                __________________________
            </td>
        </tr>
        <tr>
            <td align="left" valign="top" class='clsReadOnly'>Row 3
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                ghi
            </td>
            <td align="left" valign="top" class='clsReadOnly'>
                __________________________
            </td>
        </tr>
    </table>

Answer 1

It depends on what you are trying to accomplish. If this is how your table will always look, you could do the following:

var cells = document.getElementsByClassName('clsReadOnly');

cells[2].innerHTML = "Row1 Column3";
cells[5].innerHTML = "Row2 Column3";
cells[8].innerHTML = "Row3 Column3";

If you don’t know how many columns you will start with, you would have to do this:

var rows = document.getElementsByTagName('tr');

for (var i=0; i<rows.length; i++) {
    var cells = rows[i].getElementsByTagName('td');

    cells[2].innerHTML = 'Row'+(i+1)+' Column3';
}

jQuery would make this much easier, as you can select by tag, by parent, etc. Of course, you can do all of this in plain JavaScript, but it takes a lot more work.

http://jsfiddle.net/bShZa/