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

Question

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

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

我的桌子是这样的，

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

而我的脚本如下。

$("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.
});
});

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

Answer 1

您的 javascript 中有一些错误。

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

这是一个更新的示例：

$("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.
  });
});

Answer 2

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

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

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

你想使用 $(this).find('td') 或者你可以使用 .children 或者更高级的选择器。有许多不同的正确方法可以获取此信息。

我已经获取了您的代码并进行了如下修改：

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

});

这适用于稍微修改的 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>

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

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

Answer 3

我想你正在寻找：

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

或者：

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