I am trying to use jQuery to pick an item in a table row that will make a change within the same row

<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>

In this instance - if I select the checkbox with the id of 2 - I would want a new column to be added/appended just after the last and if this same checkbox was unchecked it would remove the content just added. Can anyone suggest how this is done?

I am trying to use jQuery to pick an item in a table row that will make a change within the same row

<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>

In this instance - if I select the checkbox with the id of 2 - I would want a new column to be added/appended just after the last and if this same checkbox was unchecked it would remove the content just added. Can anyone suggest how this is done?

• javascript
• jquery
• dom

• 2 The markup is syntactically erroneous, since id attribute values must be unique (and violating this causes real problems). You need to modify the markup. – Jukka K. Korpela Commented Jan 13, 2012 at 13:57
• 2 Please clarify: Should a new column be added, or just a new cell? If a column, what should happen in other rows? If a cell, have you considered the implications of changing the table so its structure does not ply with HTML rules (different amount of slots in different rows)? By removing the added content, do you mean setting the cell content to empty or removing the cell? – Jukka K. Korpela Commented Jan 13, 2012 at 14:01

4 Answers 4

Make sure your id values are unique on all elements, then you can use .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();
    }
});

If you're adding multiple <td>'s, then store a reference to them or use an identifier to find them again. I'm assuming you just want to add/remove a column at the end.

As with anything jQuery, there are multiple solutions! This was the one off the top of my head.

I would better have dynamic content inserted into specified TD cell instead of creating and removing td container so that you would not have to take care about correct colspans.

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

Check this out: http://jsfiddle/sCjXg/1/

See this jsFiddle for a quick-written example

$(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()
            }
        })
})

Try something like the following:

$('[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();
    }
});

This uses the jQuery .closest(selector) method.