jQuery 遍历一个表，按类查找 td 并更改该 td 的文本

Iterate through a table finding a td by class and changing the text for that td

提问by Ed Kratz

I have an Entity Framework generated table with values in a td that I need to change. I need to do this on a row by row basis because I need to insert a group of radio buttons but each row of buttons needs a unique name.

我有一个实体框架生成的表，其中包含需要更改的 td 中的值。我需要逐行执行此操作，因为我需要插入一组单选按钮，但每行按钮都需要一个唯一的名称。

Basically, I need to set the checked value for a group of buttons based on the value of the text in a td with id of "Rate", and remove the existing text after I have got the value from it.

基本上，我需要根据 td 中 id 为“Rate”的文本值设置一组按钮的选中值，并在从中获取值后删除现有文本。

My Table looks like this,

我的表看起来像这样，

<table id="IndexTable">
<tr>
    <th>CoffeeID </th>
    <th>Degree </th>
    <th>Weight </th>
    <th>Profile </th>
    <th>UsageInfo </th>
    <th>Comments </th>
    <th>AmbientTemp </th>
    <th>Rating </th>
    <th>WeightDeducted </th>
    <th>Selected </th>
    <th>ProfileID </th>
    <th>ProfileStart </th>
</tr>
<tr>
    <td>1 </td>
    <td>1 </td>
    <td>3 </td>
    <td>9 </td>
    <td>Filter Brew </td>
    <td>Perfecto!! </td>
    <td>55 </td>
    <td id="Rating">4.25 </td>
    <td>1 </td>
    <td>4 </td>
    <td>34 </td>
    <td>1 </td>

</tr>
<tr>
    <td>3 </td>
    <td>15 </td>
    <td>99 </td>
    <td>87 </td>
    <td>Espresso </td>
    <td>WTF </td>
    <td>99 </td>
    <td id="Rating">4.5 </td>
    <td>5 </td>
    <td>3 </td>
    <td>66 </td>
    <td>4 </td>

</tr>

And my script is as follows.

我的脚本如下。

$("tr").each(function() { //get all rows in table
var str = $("text[id=Rating]").val(); //assign text with matching id to str ---doesn't work
$("td").each(function() { //get all tds in current row
    var newStr = ("#Rating").text; //assign text in td with id Rating to newStr ---- doesn't work
    alert(newStr); // fires undefined for each td in table? 
    //This is where I want to insert radio buttons and assign the one with the value of the Rating td to checked.
});
});

This is just the latest, I have looked all over this site, but everything I've seen doesn't deal with getting the value from a specific column of a specific row, changing the value, and repeating for each row/column in the table. I come from a db background, where this is really simple and this is very frustrating.

这只是最新的，我已经浏览了整个站点，但是我所看到的一切都没有涉及从特定行的特定列中获取值、更改值以及为每个行/列重复桌子。我来自数据库背景，这真的很简单，但很令人沮丧。

回答by Patricia

You've got a few things wrong with your html, and your jQuery, to start off, like SKS has stated, you cannot have multiple nodes in your html document that have the same ID. ID must be unique. I recommend using a class instead.

首先，您的 html 和 jQuery 有一些问题，就像 SKS 所说的那样，您的 html 文档中不能有多个具有相同 ID 的节点。ID 必须是唯一的。我建议改用一个类。

You should also have your header row in a <thead>and the body of your table in a <tbody>

您还应该将标题行放在 a 中<thead>，并将表的正文放在 a 中<tbody>

now, onto your jQuery, $("td")will find all the td's in the document, not just the ones in your row.

现在，在您的 jQuery 上， $("td")将找到文档中的所有 td，而不仅仅是您所在行中的那些。

you would want to use $(this).find('td')or you could use .children or a fancy higher level selector. There are MANY different, correct ways to get this information.

你会想要使用 $(this).find('td')或者你可以使用 .children 或一个花哨的更高级别的选择器。有许多不同的、正确的方法来获取这些信息。

I have taking your code and modified it like so:

我已经接受了你的代码并像这样修改了它：

$("tbody").find("tr").each(function() { //get all rows in table

    var ratingTdText = $(this).find('td.Rating').text(); 
    //gets the text out of the rating td for this row
    alert(ratingTdText);

});

This works with the html slightly modified:

这适用于稍微修改的 html：

<table id="IndexTable">
<thead>
    <tr>
    <th>CoffeeID </th>
    <th>Degree </th>
    <th>Weight </th>
    <th>Profile </th>
    <th>UsageInfo </th>
    <th>Comments </th>
    <th>AmbientTemp </th>
    <th>Rating </th>
    <th>WeightDeducted </th>
    <th>Selected </th>
    <th>ProfileID </th>
    <th>ProfileStart </th>
</tr>
</thead>
<tbody>
<tr>
    <td>1 </td>
    <td>1 </td>
    <td>3 </td>
    <td>9 </td>
    <td>Filter Brew </td>
    <td>Perfecto!! </td>
    <td>55 </td>
    <td class="Rating">4.25 </td>
    <td>1 </td>
    <td>4 </td>
    <td>34 </td>
    <td>1 </td>

</tr>
<tr>
    <td>3 </td>
    <td>15 </td>
    <td>99 </td>
    <td>87 </td>
    <td>Espresso </td>
    <td>WTF </td>
    <td>99 </td>
    <td class="Rating">4.5 </td>
    <td>5 </td>
    <td>3 </td>
    <td>66 </td>
    <td>4 </td>

</tr>
</tbody>
</table>

Hope this helps get you going in the right direction!

希望这可以帮助您朝着正确的方向前进！

oh, i almost forgot! here is a link to a jsfiddle so you can see this in action: http://jsfiddle.net/fCpc6/

哦，我差点忘了！这是一个 jsfiddle 的链接，所以你可以看到它的实际效果：http: //jsfiddle.net/fCpc6/

回答by Steven Edison

I think you're looking for:

我认为您正在寻找：

var newStr = ("#Rating").text();

Or:

或者：

var newStr = ("td[id='Rating']").text();

回答by jrummell

You have a few errors in your javascript.

您的 javascript 中有一些错误。

• Use thisto get tds that belong to the current tr.
• "text[id=Rating]"is an invalid selector - there is no text tag.
• #Ratingshould probably be a class, since IDs must be unique. (change <td id="Rating">to <td class="rating">.
• You were missing parentheses on .text().

• 使用this得到td属于电流S tr。
• "text[id=Rating]"是一个无效的选择器 - 没有文本标签。
• #Rating应该是一个类，因为 ID 必须是唯一的。（更改<td id="Rating">为<td class="rating">.
• 您在 上缺少括号.text()。

Here's an updated sample:

这是一个更新的示例：

$("tr").each(function() { //get all rows in table
  $("td", this).each(function() { //get all tds in current row
    var newStr = $(".rating").text(); //assign text in td with id Rating to newStr ---- doesn't work
    alert(newStr); // fires undefined for each td in table? 
    //This is where I want to insert radio buttons and assign the one with the value of the Rating td to checked.
  });
});