Add New Table Row after current row using jQuery

clone, event-handling, jquery

Solution

`$(this).parent('tr')` will not find anything. Your `input` element will be inside either a `td` or a `th`. `parent` only finds the element's immediate parent, then compares it against the selector you provide. It will therefore find nothing. You then clone nothing, and insert the new nothing after the old nothing. Perhaps unsurprisingly, this doesn't actually do anything.

You need to use `closest`, which finds the nearest element to match a selector

var $curRow = $(this).closest('tr');

Note also that you are using global variables, since you're not using `var` (I correct this in the line above), which you probably don't want to do. Furthermore, `live` is not a good function to use; use `on` instead, which does the same thing more elegantly:

$('#yourTable').on('click', 'input[name="cmdAddRow"]', function() {
    var $curRow = $(this).closest('tr'),
        $newRow = $curRow.clone(true);
    console.log($newRow);
    $curRow.after($newRow);
    console.log('added');
});

Problem

Original source