1

このテーブルを考えると：

<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>

次の疑似コードのようなことをしたいと思います。

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

JS の操作を容易にする HTML へのその他の変更の提案も受け付けています。

4

2 に答える 2

3

querySelector( MDN リンク) とそれぞれの CSS セレクターを使用して、要素を取得し、そのコンテンツを変更します。

document.querySelector( '#st_ppp .totalElements' ).innerHTML = "NewPrice";
document.querySelector( '#st_qty .totalElements' ).innerHTML = "NewQty";
于 2012-06-05T14:31:25.870 に答える
2

Internet Explorer 7以前との互換性について心配していない場合はquerySelector、そのために最適です（ただし、この方法を使用する場合は、代わりに@Sirkoにクレジットしてください）。

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

すでにjQueryを使用している場合は、次の点で優れています。

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

それ以外の場合、ループは機能します。

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;
    }
}
于 2012-06-05T14:33:42.367 に答える