使用：包含查找特定的TD元素

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> 

我的最终目标是获取和改变总金额由于后显示的值。我已经开始尝试选择包含文本“总金额到期：”的元素。

这里是我的代码在尝试此：

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

我试图改变的语法在Firebug的命令行了一点，但是当我做我总是最后在第一线接收到错误。用这样的代码，直到出现TypeError的第二行时，我才收到错误：$（tdElement）为null。

此外，不知道这是否影响任何东西，但这个表实际上是在两个其他表内。

Answer 1

I get a TypeError: $(tdElement) is null.

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

• 你不必jQuery加载。检查JavaScript控制台以查看是否有加载错误并解决找到的问题。

• 或者您确实已经加载了它，但是您还有另一个类似原型或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); 
     

一旦你那种出：

我d强烈建议不要使用:contains，如果页面大小不合适。相反，如果该元素在页面上唯一，请使用id并使用$("#theid")找到它。如果没有，请使用班级，并使用$(".theclass").find(":contains('Total Amount')")查找。

最后：您使用

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

但随后也

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

有没有必要打电话$第二次，只使用第jQuery的实例：

alert(tdElement.text()); 

Answer 2

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

FIDDLE

Answer 3

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

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

有什么理由不尝试做一些像下面？

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

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

Answer 5

嘿男人给那个td包含一个类如320.00美元的金额，或者如果你不想给一个班级，你需要一个psuedo。

其他事情，你还没有指定你想要改变其他值的事件，例如点击按钮更改值我已经完成它与文档准备功能，你可以添加任何事件，也是金额:)

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> 

CASE 2）不能添加类

我注意到，其中你想改变量td是TR的孩子是最后tr的table.So，我们可以使用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是第二个，第三个，第四个......的情况下，第三

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