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

August 22, 2022

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>

>Solution :

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>