Question

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?

Answer 1

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.