Question

我正在从MySQL生成一个类似于下面的表。当用户选中复选框时，我想为该单元格着色，理想情况下将单词“非活动”切换为“活动”（反之亦然）。

<table border="1" width="75%" class="stripeMe">
<thead>
    <tr>
        <th>Accounts</th><th>Status</th><th>Change</th>
    </tr>
</thead>
<tr>
    <td>M. Lamb</td><td class="c2"><span>Inactive</span></td><td><input type="checkbox" name="checks[]" id="R2C3" /></td>
</tr>
<tr>
    <td>B. Peep</td><td class="c2"><span>Active</span></td><td><input type="checkbox" name="checks[]" id="R3C3" /></td>
</tr>
<tr>
    <td>J. Spratt</td><td class="c2"><span>Active</span></td><td><input type="checkbox" name="checks[]" id="R4C3" /></td>
</tr>
<tr>
    <td>H. Dumpty</td><td class="c2"><span>Inactive</span></td><td><input type="checkbox" name="checks[]" id="R5C3" /></td>
</tr>

根据我在此处搜索所学到的内容，我可以切换包含复选框的单元格并使用此更改相邻的单元格字词：

$(document).ready(function() {
    $("input[type=checkbox]").click(function(e) {
        var bgColor = $(this).attr('checked') == 'checked' ? '#f00' : '#fff';
        var txtStatus = $(this).attr('checked') == 'checked' ? 'changed' : 'unchanged';
        //toggle the checkbox cell when clicked
        $(this).closest('td').css('background', bgColor);
        //toggle the inactive
        $(this).closest('td').siblings().find('span').text(txtStatus);
    });
});

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

Answer 1

您基本上错过了<span>标记，这将有效http://jsfiddle.net/k5VfD/

    <table border="1" width="75%" class="stripeMe">
        <thead>
            <tr>
                <th>Col 1</th><th>Col 2</th><th>Col 3</th>
            </tr>
        </thead>
        <tr>
            <td>R2 Col 1</td><td class="c2">R2 C2</td><td><input type="checkbox" name="checks[]" id="R2C3" /><span></span></td>
        </tr>
        <tr>
            <td>R3 Col 1</td><td class="c2">R3 C2</td><td><input type="checkbox" name="checks[]" id="R3C3" /><span></span></td>
        </tr>
        <tr>
            <td>R4 Col 1</td><td class="c2">R4 C2</td><td><input type="checkbox" name="checks[]" id="R4C3" /><span></span></td>
        </tr>
        <tr>
            <td>R5 Col 1</td><td class="c2">R5 C2</td><td><input type="checkbox" name="checks[]" id="R5C3" /><span></span></td>
        </tr>
    </table>

$(document).ready(function() {

    $("input[type=checkbox]").click(function(e) {
        var bgColor = $(this).attr('checked') == 'checked' ? '#f00' : '#fff';
        var txtC = $(this).attr('checked') == 'checked' ? 'acvtive' : 'Inactive';
        //do something when checked
        $(this).closest('td').css('background', bgColor);
        //Changed here to target the added span. I don't use next() so that
        //this will work even if you play around with the DOM a little.
         $(this).closest('td').find('span').text(txtC);

    });
});

Answer 2

http://jsfiddle.net/rmf56/

只需用

更改最后一个语句

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

Answer 3

使用这样的siblings()实际上没有意义 - 你正在做的就是告诉它，对于每个兄弟，找到内部跨度并设置其文本。如果您需要这样做，那么您将使用siblings().each(function(){...});。

但由于那不是你想要的，我改变了这一行：

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

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

虽然您可以通过链接来提高代码效率：

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

Example

我也简化了你的三元组。它使用jQuery的is()函数来检查是否选中了复选框。它返回一个布尔值，效果很好。祝你好运！

Answer 4

你确实非常接近。这是我的解决方案，它基于您的小提琴样本。

更改

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

要

$(this).closest('td').prev().css('background', bgColor); 
// finds the nearest TD element and then the PREVIOUS element taking us to the required TD before changing its bg.

我会添加此内容以更新文本

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

Answer 5

另一种选择：http://jsbin.com/ahitiv/8/edit#javascript,html

$(document).ready(function(){
    $("tr").each(function(idx){
        $(this).click(function(){
           var rowid = idx;
           rowid = "#" + rowid;
           var rowtext = $(rowid).text();
           if (rowtext == "Inactive")
              $(rowid).text("Active");
           else
             $(rowid).text("Inactive");

        });

     });

});

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

5 个答案: