Как переключать содержимое соседней ячейки с помощью jQuery

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);
    });
});

Я чувствую себя так близко, но, похоже, не могу найти свой путь! Здесь - моя тестовая скрипка.

Answer 1

другой вариант: 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");

        });

     });

});

Answer 2

Вы действительно были очень близки.Вот мое решение, основанное на вашем образце скрипки.

Изменить

$(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 3

http://jsfiddle.net/rmf56/

просто измените последнее утверждение с

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

Answer 4

Использование siblings(), как это на самом деле не имеет смысла - то, что вы делаете, это сказать, для каждого родного брата, найти внутренний промежуток и установить его текст.Если вам нужно было сделать это, вы бы использовали siblings().each(function(){...});.

Но так как это не то, что вы хотите, я изменил эту строку следующим образом:

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

Мы просто выбираемПредыдущий элемент parent td и его текст.

Хотя вы можете сделать свой код более эффективным, добавив в него следующую цепочку:

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

Пример .

Я тоже упростил вашу троичную.Он использует функцию jQuery is(), чтобы проверить, установлен ли флажок.Возвращает логическое значение и отлично работает.Удачи!

Answer 5

Вы пропустили тег <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);

    });
});