CODEWITHSUNDEEP
javascripthtmlhtml-table
EGxo
EGxo

Reputation: 315

Using Javascript to control innertext of table cells

I have 3 tables as follows:

<table id="timbercamptable">
    <tr>
        <th>Production</th>
        <th class="unitspertitle"></th>
        <th class="unitspernexttile"></th>
    </tr>   
    <tr>
        <td>Base production</td>
        <td class="currentunits"></td>
        <td class="nextunits"></td>
    </tr>
</table>

The classes and structure of the tables are the same, but the table id's are different. I wish to control the innerText of the classes using JavaScript. What would be the correct way to call these classes, knowing that the other table would have the id sulphurpittable and goldminetable.

For example I want to change the innerText of currentunits located in the timbercamptable

Upvotes: 0

Views: 1106

Answers (1)

Phani Kumar M
Phani Kumar M

Reputation: 4590

You can use document.querySelector to query for table based on table id and class of the table cell.

document.querySelector("#timbercamptable .currentunits").textContent = "100.00";
<table id="timbercamptable">
    <tr>
        <th>Production</th>
        <th class="unitspertitle"></th>
        <th class="unitspernexttile"></th>
    </tr>
    <tr>
        <td>Base production</td>
        <td class="currentunits"></td>
        <td class="nextunits"></td>
    </tr>
</table>

Upvotes: 2

Related Questions