Question

我有以下渲染的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>

我的最终目标是获取并更改总金额到期后显示的值。我已经开始尝试选择包含文本＆＃34;总金额到期的元素：＆＃34;。

这是我的代码尝试这个：

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

我尝试在Firebug的命令行中稍微改变一下语法，但是当我这样做时，我总是在第一行收到错误。使用这样的代码，直到我得到TypeError的第二行我才收到错误：$（tdElement）为null。

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

Answer 1

我得到一个TypeError：$（tdElement）为null。

即使它与任何东西都不匹配，jQuery也会返回一个有效的jQuery对象（不包含匹配的元素），而不是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。相反，如果该元素在页面上是唯一的，请使用id并使用$("#theid")找到它。如果没有，请使用类，并使用$(".theclass").find(":contains('Total Amount')")找到它。

最后：你正在使用

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

但也

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

没有必要再次调用$，只需使用第一个jQuery实例：

alert(tdElement.text());

Answer 2

嘿，男人会给那个包含$ 320.00一个等级的td，或者如果你不想上课，你需要一个伪造的。

你没有指定要用其他值更改的事件的其他事情，例如点击按钮更改值我已经使用文档就绪功能完成了它可以添加任何事件以及金额：）< / p>

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

案例3）如果表的TR是第二，第三，第四......如果是第三

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

Answer 3

$('td', 'table').filter(function() {
    return $(this).text().toLowerCase().indexOf('amount due') != -1;
}).next('td').text('$320.00');

FIDDLE

Answer 4

这是一个略有不同的配置，但我认为它可能适合你。

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

Answer 5

是否有理由不尝试做以下事情？

<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();

根据您发布的内容，这似乎是最简单的解决方案。

使用：contains来查找特定的td元素

5 个答案: