Question

Given this table:

<table border="1" width="200" id="table1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#CB2F7F">
    <tr id="st_ppp">
        <td width="60%" class="totalLabels">Price per piece</td>
        <td width="39%" align="right" class="totalElements">unknown</td>
    </tr>
    <tr id="st_qty">
        <td width="60%" class="totalLabels">Quantity</td>
        <td width="39%" align="right" class="totalElements">unknown</td>
    </tr>
    <tr>
        <td width="60%">&nbsp;</td>
        <td width="39%" align="right">&nbsp;</td>
    </tr>
    <tr>
        <td width="60%" class="subTotalLabel">Sub-Total:</td>
        <td width="39%" align="right" class="subTotal">unknown</td>
    </tr>
</table>

I’d like to do something like the following pseudo code:

document.getElementById("st_ppp").[td whose class is totalElements].innerHTML="NewPrice";
document.getElementById("st_qty").[td whose class is totalElements].innerHTML="NewQty";

I’m open also to suggestions of any other changes to the HTML that will make the JS easier to work with.

Answer 1

If you’re not worried about compatibility with Internet Explorer 7 and earlier, querySelector is perfect for that (but if you go this way, credits to @Sirko instead):

document.querySelector('#st_ppp > .totalElements').innerHTML = "NewPrice";

If you’re already using jQuery, it’s excellent for that:

$('#st_ppp > .totalElements').text('NewPrice');

Otherwise, a loop will work:

var pricePerPiece = document.getElementById('st_ppp');
var i, c;

for(i = 0; c = pricePerPiece.children[i]; i++) {
    if((' ' + c.className + ' ').indexOf(' totalElements ') > -1) {
        c.innerHTML = 'NewPrice';
        break;
    }
}