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>

我的最终目标是获取并更改总金额后显示的值。我首先尝试选择包含文本“应付总额：”的元素。

这是我尝试这样做的代码：

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

我曾尝试在 Firebug 的命令行中稍微更改语法，但当我这样做时，我总是在第一行收到错误。使用这样的代码，直到第二行出现 TypeError: $(tdElement) 为空时，我才会收到错误消息。

此外，不确定这是否会影响任何内容，但该表实际上位于其他两个表中。

4

5 回答 5

4

我得到一个 TypeError: $(tdElement) is null。

即使它不匹配任何东西，jQuery 也会返回一个有效的 jQuery 对象（不包含匹配的元素）， not null，所以听起来像：

  • 您没有加载 jQuery。检查 JavaScript 控制台以查看您是否有加载错误并解决您发现的任何错误。

  • 或者你确实已经加载了它，但你还加载了另一个库，如 Prototype 或 MooTools，它们窃取了$符号。如果是这样，您有三个选择（至少）：

    1. 尝试停止使用其他库，并将其从页面中删除。

    2. 使用jQuery而不是在$任何你想使用 jQuery 的地方。

    3. 或者将您的 jQuery 代码放在一个可以用来隐藏$符号的函数中，如下所示：

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

一旦你整理出来：

:contains如果页面大小不限，我强烈建议不要使用。相反，如果该元素在页面上是唯一的，请使用 anid并使用$("#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

嘿，伙计，给那个包含金额的 td，例如每节课 $320.00，或者如果你不想上课，你需要一个假的。

您尚未指定要更改其他值的事件的其他事情，例如单击按钮更改值我已经使用文档就绪功能完成了它，您可以向其中添加任何事件以及数量:)

案例 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 的最后一个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是第二，第三，第四......在它是第三的情况下

$(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 回答