Form (table) Row Add and Delete

by Ben Clayton

HTML

<table id="metaedit" width="600" border="0" cellspacing="0" cellpadding="4">
    <tbody>
        <tr class='frow'>
            <td>
                <table border="0" cellspacing="0" cellpadding="0">
                    <tbody>
                        <tr>
                            <td style="width:100px;vertical-align:top;">
                                <input style="height:25px" class="metaname" value="title"></input>
                            </td>
                            <td style="width:400px;">
                                <textarea class="inputstyleDATA metavalue" id="inptitle" name="inptitle" style="width:450px;height:25px;float:right;">Content Slider Test</textarea>
                            </td>
                            <td style="width:40px;">
                                <button class="del">DEL</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td style="height:25px;text-align:center;">
                <div style="float:left;">
                    <button id="add">Add Meta</button>
                </div>
                <div style="float:right;">
                    <button id="save">Save</button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$(document).on('click', '#metaedit #add', function () {
    //var r = $('#metaedit textarea').length;
    var trc = $('#metaedit tr:first').clone()
    trc.find('input').val(''); // clear input
    trc.find('textarea').text(''); // clear textarea
    $('#metaedit tr:last').before(trc);
    return false;
});

$(document).on('click', '#metaedit .del', function () {
    var tr = $(this).closest('.frow');
    tr.css("background-color", "#FF3700");
    tr.fadeOut(600, function () {
        tr.remove();
    });
    return false;
});

$(document).on('click', '#metaedit #save', function () {

    var mv = new Array;
    $('#metaedit .metaname').each(function (idx) {
        push mv, $(this).text();
    });
    $('#metaedit .metaname').each(function (idx) {
        console.log($(this).val() + " = " + mv[idx]);
    });

    return false;
});