Как настроить таргетинг на другой элемент в той же строке таблицы с помощью jQuery

Question

Я пытаюсь использовать jQuery, чтобы выбрать элемент в строке таблицы, который внесет изменения в той же строке

<table>
<tr id="t1"><td><input type="checkbox" id="t1" value="" /></td></tr>
<tr id="t2"><td><input type="checkbox" id="t2" value="" /></td>{want new stuff here}</tr>
</table>

В этом случае - если я выберу флажок с идентификатором 2 - я бы хотел, чтобы новый столбец был добавлен / добавлен сразу после последнего, и если этот же флажок был снят, он удалил только что добавленное содержимое. Кто-нибудь может подсказать, как это сделать?

Answer 1

Убедитесь, что значения id уникальны для всех элементов, тогда вы можете использовать .parents("tr"):

$(".mytable tr :checkbox").click(function () {
    var checked = $(this).is(":checked"),
        $tr     = $(this).parents("tr").first();

    if (checked) {
        $tr.append("<td></td>");
    } else {
        $tr.find("td:last").remove();
    }
});

Если вы добавляете несколько <td>, сохраните ссылку на них или используйте идентификатор, чтобы найти их снова. Я предполагаю, что вы просто хотите добавить / удалить столбец в конце.

Как и в любом другом jQuery, существует множество решений! Это был один из моих макушек.

Answer 2

Я бы лучше вставил динамическое содержимое в указанную ячейку TD, а не создавал и удалял контейнер td, чтобы вам не приходилось заботиться о правильных colspans.

$('#table :checkbox').change(function() {
    var cont = $(this).closest('tr').find('.content');
    if ($(this).is(':checked')) {
        cont.append('Some content');
    }
    else {
        cont.empty();
    }
});

Проверьте это: http://jsfiddle.net/sCjXg/1/

Answer 3

Попробуйте что-то вроде следующего:

$('[type="checkbox"]').change(function () {
    var $this = $(this);

    if ($this.is(':checked') {
        $this.closest('tr').append('<td></td>');
    } else {
        $this.closest('tr').children('td:last-child').remove();
    }
});

Здесь используется метод jQuery .closest(selector).

Answer 4

См. этот jsFiddle для быстрого написания примера

$(function(){
    $("#t2").find("input").click(function(){
            if($(this).is(":checked")){
                $(this).parents('tr').append("<td class='t2-add'>have new stuff</td>")
            }
            else{
                $(this).parents('tr').find('.t2-add').remove()
            }
        })
})