Question

http://jsfiddle.net/D6be5/

HTML

<table class="example" border="1">
    <tr>
        <td>
            <label>Enter text</label>
            <textarea>Enter text</textarea>
        </td>
    </tr>
    <tr class="clone"></tr>
</table>

<p><button id="add-row">Add Row</button></p>​

jQuery

$(document).ready(function() {
    $(this).on('click', function(event) {
        if ( ! $(event.target).closest('table').hasClass('example')) {
            $('table label').show();
            $('table textarea').hide();
        }
    });

    $('table td').on('click', function() {
        $('table label').show();
        $('table textarea').hide();
        $(this).find('label').hide();
        $(this).find('textarea').show();
    });

    $('#add-row').on('click', function() {
        _this = $('table tr.clone')
            .clone()
            .removeClass('clone')
            .insertBefore('.clone');

        _this.append('<td><label>Enter text</label><textarea>Enter text</textarea></td>');
    });                
});​

CSS

table textarea {
    display: none;
}

table .clone {
    display: none;
}​

The link above explains what I’m trying to do.

Basically the problem is this. I have a label and textarea within a td, the textarea is hidden and only the labels show at start. When the user clicks on the cell of the table it hides the label and shows the textarea, which works fine until you try and add a clone of the row then it doesn’t do anything.

Edit: Forgot to mention why I’m cloning the row and adding the cells afterwards. In my actual code I allow for column creation as well and I do a count of the rows and add the cells after.

Thank you very much for any help =)

Answer 1

Another Method.

$('table').on('click', "td", function() {

})