How to replace text in a table column with Javascript without any Table ID

Question

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

Would it be possible to change the text in column2 where it says "ABC" to "XYZ". Please note that there are multiple tables on the page, but I would like to replace the text for all the tables in column 2 where text = "ABC" with the new text "XYZ".

<table width="100%" class="mytable"><tbody>
    <tr><th width="70%">Column1</th><th width="30%">Column2r</th></tr>
    <tr><td>Test</td><td>ABC</td></tr>
    <tr><td>123</td><td>LMN</td></tr>
</tbody></table>
      
<table width="100%" class="mytable"><tbody>
    <tr><th width="70%">Column1</th><th width="30%">Column2r</th></tr>
    <tr><td>ppp</td><td>ssd</td></tr>
    <tr><td>dffd</td><td>ABC</td></tr>
</tbody></table>

Sure, iterate over all tables, read the cell and replace if content matches "ABC" — user5734311
– user5734311, Commented Aug 22, 2022 at 15:25

trincot · Accepted Answer · 2022-08-22 15:28:55Z

3

You can use a CSS selector to select all TD elements that occur in a second column (i.e. they are the second child in their parent element):

for (const td of document.querySelectorAll("tr>td:nth-child(2)")) {
    if (td.textContent == "ABC") td.textContent = "XYZ";
}

<table width="100%" class="mytable"><tbody>
    <tr><th width="70%">Column1</th><th width="30%">Column2r</th></tr>
    <tr><td>Test</td><td>ABC</td></tr>
    <tr><td>123</td><td>LMN</td></tr>
</tbody></table>
      
<table width="100%" class="mytable"><tbody>
    <tr><th width="70%">Column1</th><th width="30%">Column2r</th></tr>
    <tr><td>ppp</td><td>ssd</td></tr>
    <tr><td>dffd</td><td>ABC</td></tr>
</tbody></table>

answered Aug 22, 2022 at 15:28

trincot

357k38 gold badges282 silver badges338 bronze badges

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

2 Comments

magicsinger Over a year ago

Yes, I have more than one table on the page and want to replace the text for all the tables in column2 where text = ABC with new text XYZ.

trincot Over a year ago

OK, @magicsinger, thanks for clarifying. I think this answer does the job then.

Collectives™ on Stack Overflow

How to replace text in a table column with Javascript without any Table ID

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related