0

私は次のレンダリングされたhtmlを持っています:

<table width="420" cellspacing="0" cellpadding="3" border="0">
<tbody>
<tr><td>....</td>
</tr>
<tr>
<td>Total Amount Due:</td>
<td>$168.88</td>
</tr>

私の最終的な目標は、合計支払額の後に表示される値を取得して変更することです。テキスト「Total Amount due:」を含む要素を選択することから始めました。

これを試みる私のコードは次のとおりです。

var tdElement = $("td:contains('Total Amount Due:')");
alert($(tdElement).text());

Firebug のコマンド ラインで構文を少し変更しようとしましたが、そうすると、常に最初の行でエラーが発生します。このようなコードでは、TypeError: $(tdElement) が null になる 2 行目までエラーを受け取りません。

また、これが何かに影響するかどうかはわかりませんが、このテーブルは実際には他の 2 つのテーブル内にあります。

4

5 に答える 5

4

TypeError: $(tdElement) is null が発生します。

何にも一致しない場合でも、jQuery は ではなく、有効な jQuery オブジェクト (一致する要素を含まない) を返すnullため、次のいずれかのように聞こえます。

  • jQuery がロードされていません。JavaScript コンソールをチェックして、読み込みエラーがあるかどうかを確認し、見つかったエラーを解決します。

  • または、ロードされていますが、$シンボルを盗んだ Prototype や MooTools などの別のライブラリもロードされています。その場合、(少なくとも) 3 つの選択肢があります。

    1. 他のライブラリの使用を停止し、ページから削除してください。

    2. jQueryjQuery を使用するすべての場所の代わりに使用$します。

    3. $または、次のように、シンボルをシャドウするために使用できる関数に jQuery コードを配置します。

      // If you have another library loaded, out here $ may not === jQuery
(function($) {
    // Here, your code can happily assume $ === jQuery...
})(jQuery);

それを整理したら：

:containsページのサイズに関係なく、使用しないことを強くお勧めします。代わりに、その要素がページ上で一意である場合は、 を使用し、 を使用しidて見つけます$("#theid")。そうでない場合は、クラスを使用し、 を使用して見つけます$(".theclass").find(":contains('Total Amount')")。

そして最後に：あなたは使用しています

var tdElement = $("td:contains('Total Amount Due:')");

しかし、また

alert($(tdElement).text());

もう一度呼び出す必要はありません$。最初の jQuery インスタンスを使用するだけです。

alert(tdElement.text());
于 2012-12-10T16:29:48.940 に答える
1

ちょっと男は、例えばクラス$ 320.00の金額を含むそのtdを与えるか、クラスを与えたくない場合は、疑似が必要です。

他の値で変更したいイベントを指定していないその他のこと。たとえば、ボタンをクリックして値を変更すると、ドキュメント準備機能でそれを行いました。任意のイベントと量を追加できます:)

CASE 1) 授業をしていただける場合

$(document).ready( function() {
    $(".amount").text("any value you want");
});

<table width="420" cellspacing="0" cellpadding="3" border="0">
    <tbody>
        <tr>
            <td>....</td>
        </tr>
        <tr>
            <td>Total Amount Due:</td>
            <td class="amount">$168.88</td>
        </tr>

ケース 2) クラスを追加できない

td金額を変更したいのは、最後trにある tr の子であることに気付きましたtable。したがって、PSEUDO を使用できます。

$(document).ready( function() {
    $("table tbody tr:last td:last").text("any value you want");
});

<table width="420" cellspacing="0" cellpadding="3" border="0">
    <tbody>
        <tr><td>....</td></tr>
        <tr>
            <td>Total Amount Due:</td>
            <td>$168.88</td>
        </tr>

CASE 3)TRテーブルの IF が 2 番目、3 番目、4 番目… 3 番目の場合

$(document).ready( function() {
    $("table tbody tr:nth-child(3) td:last").text("any value you want");
});

<table width="420" cellspacing="0" cellpadding="3" border="0">
    <tbody>
        <tr><td>....</td></tr>
        <tr>
            <td>Total Amount Due:</td>
            <td>$168.88</td>
        </tr>
于 2012-12-10T16:42:38.897 に答える
0 
$('td', 'table').filter(function() {
    return $(this).text().toLowerCase().indexOf('amount due') != -1;
}).next('td').text('$320.00');

フィドル

于 2012-12-10T16:29:57.697 に答える
0

これは少し異なる構成ですが、うまくいくと思います。

<table width="420" cellspacing="0" cellpadding="3" border="0">
<tbody>
<tr><td>....</td>
</tr>
<tr>
<td>Total Amount Due:</td>
<td id="amountDue">$168.88</td>
</tr>
</tbody>
</table>

および JavaScript:

alert($("td#amountDue").text());

http://jsfiddle.net/BAW8c/

于 2012-12-10T16:38:01.807 に答える
0

次のようなことをしようとしない理由はありますか?

<table width="420" cellspacing="0" cellpadding="3" border="0">
<tbody>
<tr><td>....</td>
</tr>
<tr>
<td>Total Amount Due:</td>
<td id="total-amount-due">$168.88</td>
</tr>
var ttl = $('#total-amount-due').text();

あなたが投稿したものに基づいて、それが最も簡単な解決策になるようです。

于 2012-12-10T16:42:01.637 に答える