如何使用jQuery切换相邻单元格内容

我正在从MySQL生成一个表，如下所示。当用户选中复选框时，我想给该单元格上色，理想情况下，将单词“Inactive”切换为“Active”（反之亦然）

---

我觉得我离得很近，但似乎找不到我的路！这是我的测试提琴。

您基本上缺少了

标记，这将起作用

Col 1Col 2Col 3
R2列1R2 C2
R3列1R3 C2
R4列1R4 C2
R5列1R5 C2
$（文档）.ready（函数（）{
$（“输入[类型=复选框]”）。单击（函数（e）{
var bgColor=$（this.attr（'checked'）=='checked'？'#f00'：'#fff'；
var txtC=$（this.attr（'checked'）=='checked'？'acvtive'：'Inactive'；
//检查后做某事
$（this）.closest（'td'）.css（'background'，bgColor）；
//在此处更改为以添加的跨度为目标。我不使用next（）以便
//即使您稍微使用DOM，这也会起作用。
$（this）.closest（'td'）.find（'span'）.text（txtC）；
});
});

您基本上缺少了

标记，这将起作用

Col 1Col 2Col 3
R2列1R2 C2
R3列1R3 C2
R4列1R4 C2
R5列1R5 C2
$（文档）.ready（函数（）{
$（“输入[类型=复选框]”）。单击（函数（e）{
var bgColor=$（this.attr（'checked'）=='checked'？'#f00'：'#fff'；
var txtC=$（this.attr（'checked'）=='checked'？'acvtive'：'Inactive'；
//检查后做某事
$（this）.closest（'td'）.css（'background'，bgColor）；
//在此处更改为以添加的跨度为目标。我不使用next（）以便
//即使您稍微使用DOM，这也会起作用。
$（this）.closest（'td'）.find（'span'）.text（txtC）；
});
});

把最后一句话改成

 $(this).closest('td').prev('td').find('span').text(txtC);

把最后一句话改成

 $(this).closest('td').prev('td').find('span').text(txtC);

像这样使用

sibles（）

实际上没有意义，您所做的是告诉它，对于每个兄弟，找到内部跨度并设置其文本。如果需要这样做，那么可以使用

sibbines（）.each（function（）{…}）

但既然那不是你想要的，我把那句话改成：

$(this).closest('td').prev().text(txtStatus);

我们只是选择父td的上一个元素并设置其文本

尽管您可以通过如下链接使代码更高效：

$(this)
    .closest('td')
    .css('background', bgColor)
    .prev()
        .text(txtStatus);


我还简化了你的三元组。它使用jQuery的
is（）
函数检查复选框是否被选中。它返回一个布尔值，效果很好。祝你好运
 像这样使用
sibles（）
实际上没有意义，您所做的是告诉它，对于每个兄弟，找到内部跨度并设置其文本。如果需要这样做，那么可以使用
sibbines（）.each（function（）{…}）

但既然那不是你想要的，我把那句话改成：

$(this).closest('td').prev().text(txtStatus);

我们只是选择父td的上一个元素并设置其文本

尽管您可以通过如下链接使代码更高效：

$(this)
    .closest('td')
    .css('background', bgColor)
    .prev()
        .text(txtStatus);


我还简化了你的三元组。它使用jQuery的
is（）
函数检查复选框是否被选中。它返回一个布尔值，效果很好。祝你好运
 你确实非常接近。这是我根据你的提琴样品提出的解决方案

改变

$(this).closest('td').css('background', bgColor);

到

我会加上这个来更新文本

$(this).closest('td').prev().text(txtC);

你真的很接近。这是我根据你的提琴样品提出的解决方案

改变

$(this).closest('td').css('background', bgColor);

到

我会加上这个来更新文本

$(this).closest('td').prev().text(txtC);

另一种选择：

另一种选择：

这会改变复选框父项的文本--这不是她要求的行为。@Purmou抱歉，但小提琴与她发布的不同，我看了看小提琴！这会改变复选框父项的文本--这不是她要求的行为。@Purmou抱歉，但小提琴与她发布的不同，我看了看小提琴！这正是我的目标！谢谢大家！这正是我的目标！谢谢大家！我真的要感谢你们所有人！我从你的每一个答案中学到了很多！我真的要感谢你们所有人！我从你的每一个答案中学到了很多！