How to replace text in a column (inside a table) with Javascript without any ID

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>

Stephen · Accepted Answer · 2010-12-02 23:18:09Z

2

If this is the only table on the page, you can do it with jQuery:

$('table')
    .children('tr')
    .each(function() {
        $(this).children('td:last').html('<p>A Paragraph of Text</p>');
    });

answered Dec 2, 2010 at 23:18

Stephen

19k10 gold badges62 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Tang Over a year ago

Same as: $('table > tr > td:last').html('<p>A Paragraph of Text</p>');

Stephen Over a year ago

@box9: Your code is smooth, and readable. However, my example would resolve faster. Using jQuery functions like .children() to filter and traverse the DOM is more efficient than relying on the selector engine to do it for you.

Jeff B · Accepted Answer · 2010-12-02 23:20:15Z

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/

edited Dec 2, 2010 at 23:20

answered Dec 2, 2010 at 23:12

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

1 Comment

Stephen Over a year ago

getElementsByClassName() is not supported in IE6, IE7, or IE8.

KJYe.Name · Accepted Answer · 2010-12-05 03:36:00Z

1

getElementsByClassName() is HTML5 and is not currently supported in IE. Here is the jsfiddle for the solution http://jsfiddle.net/V38MF/2/ w/o jQuery needed

var myTable = document.getElements('td');
for(var i=0; i<myTable.length; i++){
    if((i+1)%3 == 0)
        console.log(myTable[i].innerHTML);
}

edited Dec 5, 2010 at 3:36

answered Dec 2, 2010 at 23:18

KJYe.Name

17.2k5 gold badges51 silver badges63 bronze badges

2 Comments

Stephen Over a year ago

You should put that code here instead of jsfiddle.net, for posterity.

KJYe.Name Over a year ago

true. posterity and readability makes code maintenance easy. you should try mootools instead of jquary for posterity and readability.

Collectives™ on Stack Overflow

How to replace text in a column (inside a table) with Javascript without any ID

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related