jQuery for html table 根据其他单元格值更改单元格内容答案

【问题标题】：jQuery for html table to change cell contents base on other cell valuesjQuery for html table 根据其他单元格值更改单元格内容
【发布时间】：2012-09-08 02:24:10
【问题描述】：

我有一个类似的表格，但有很多行：

<table width=400px id=mytable>
 <tr>
  <td>test one</td>
  <td>yes</td>
  <td>success</td>
 </tr>
 <tr>
  <td>test two</td>
  <td>yes</td>
  <td>none</td>
 </tr>
</table>

这些值由数据库动态填充。如果每行中的第二个 td 的值为 yes，我如何将第三个 td 的值更改为“进行中”？该值为 yes，因为用户已提交测试但测试正在进行中，并且在数据库填充 td3 之前 td3 的值为 none。

我有一点我用过的 jquery，但是它只是根据一个单元格搜索和替换文本，而不是说下一个单元格。

$(function() {
    $('#mytable td').each(function() {
        var html = $(this).html();
        $(this).html(
        html.replace(/0/,'<b>success</b>')
             .replace(/1/,'<b>failed</b>')
        );
    });
});

我也一直在使用这段代码，但这不适合我想要做的，因为它只根据 .eq(x) 位置更新某些 TD。

$(document).ready(function() {
    $('#mytable').find('td').eq(4).text('changeme');
});

我的表可能有大约 20 行，我想为我表中的每个 2nd td 执行此操作

理想情况下，我想要一个 throbber，但一旦我能解释第二个 td 值，这应该是可能的。

【问题讨论】：

您似乎已经知道自己在做什么。将if 语句与$('#mytable').find('td').eq(4).text('changeme'); 结合起来做你想做的事。

标签： jquery forms html-table

【解决方案1】：

此代码将通过 td，查看一个单元格的值是否为“无”，如果是，则将下一个单元格的值设置为“进行中”：

$(function() {
    $('#mytable td').each(function() {
        var html = $(this).html();
        if (html == "none")
            $(this).next().html("in progress");
        });
});

根据以下评论更新代码：

$(document).ready(function() {
    $('td').each(function() {
        if ($(this).html() == "yes" && $(this).next().html() == "none") {
            $(this).next().html("in progress");
        }
    });
});

【讨论】：

该死，我没问对！您的解决方案确实回答了我的问题，但我的情况并没有像我的问题那样发挥作用。所以事实上，单元格 td2 是 yes 而 td3 是 none。 td3 将在测试结果出来时得到更新。虽然 td2 是 yes 而 td3 是 none，但我想将 td3 的值更改为“进行中”。但是当 td3 更新时，我想向数据库值显示成功或失败。您可以将代码更改为... if (html == "yes") 和 $(this).next == none) ...？
我已经更新了代码。我希望我理解正确:) JSFiddle 这里：jsfiddle.net/W4jSu/1
我刚刚尝试实施您的解决方案，但遇到了一些问题。也许其他一些 jquery 东西正在破坏它。我在我的网页 jsfiddle.net/W4jSu/18 中使用相同的代码？
嗨，抱歉耽搁了。是的，这是完美的，现在已在我的网站上启动并运行 - 非常棒。谢谢！

【解决方案2】：

$('table tr').each(function(){
    $('td:eq(1):contains(yes)', this).next().text('in progress')
})

http://jsfiddle.net/CYdVs/

【讨论】：

在这些解决方案之后我意识到我没有正确地问我的问题，所以我更新了我的问题..
@Oli 只需将 none 替换为 yes。
酷 - 是的。这些答案帮助我了解我可以轻松更改和使用 jquery .. 感谢您的帮助
@Oli 是的，jQuery 大大简化了 DOM 的工作。您可以阅读 api 并轻松地做任何可以做的事情。
是的，我刚刚提出了一个令人眼花缭乱的解决方案，基于稍微改变我的 django 应用程序。我现在有 jquery 使用正在进行的值和完成和成功的图像更新页面 |测试值进来的时候失败。V高兴。谢谢你的回答

【解决方案3】：

此示例将遍历每一行中的第二个 td，如果值为“无”，则将下一个单元格替换为“进行中”：

$("#mytable td:nth-child(2)").each(function(index, elem)
{
    if($(elem).html() === "none")
    {
        $(elem).next().html("in progress")
    }
});

jsFiddle

【讨论】：

在这些解决方案之后我意识到我没有正确地问我的问题，所以我更新了我的问题..

【解决方案4】：

你可以用each()运行一个循环，用它运行一个计数器，每次检查计数器是偶数还是奇数。

CSS-Tricks.com : Check if even or odd

不过，肯定有更好的方法来做到这一点。

【讨论】：

【解决方案5】：

查看Fiddle

$(function() {
    var secondCells = $('tr').find('td:eq(1)');
    console.log(secondCells)
    $.each(secondCells, function(i) {
        if( $(this).text() == 'none'){
            console.log($(this).next())
           $(this).next().text('Processing..');
        }
    });
});

【讨论】：

太好了 - 谢谢。我看着这个，它帮助我想出了我的解决方案。感谢您的意见

【解决方案6】：

试试这个

$('#mytable td').each(function() {
    var html = $(this).html();
    if(html === 'none'){
        $(this).next('td').text('in progress');
}
});

查看工作fiddle

【讨论】：

在这些解决方案之后我意识到我没有正确地问我的问题，所以我更新了我的问题..