JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />                  
<table id="productTable" class="table table-striped table-condensed">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Datum</th>
                                <th>Tijd</th>
                                <th>Minuten</th>
                            </tr>
                        </thead>
                        <tbody>                                    
                        <tr>
                                <td><input id="products" class="" name="products[]" type="text" /></td>
                                <td><input id="date" class="datepick" name="date[]" type="text" /></td>
                                <td><input id="time" class="" name="time[]" type="text" /></td>
                                <td><input id="minutes" class="" name="minutes[]" type="text" /></td>
                                <td><a id="addnew" href="">add</a></td>
</tr>
</tbody>
</table>

JavaScript

// start a counter for new row IDs
// by setting it to the number
// of existing rows
$(".datepick").datepicker();
var newRowNum = 0;

// bind a click event to the "Add" link
$('#addnew').click(function() {

    $(".datepick").datepicker("destroy");

    // increment the counter
    newRowNum = $(productTable).children('tbody').children('tr').length + 1;

    // get the entire "Add" row --
    // "this" refers to the clicked element
    // and "parent" moves the selection up
    // to the parent node in the DOM
    var addRow = $(this).parent().parent();

    // copy the entire row from the DOM
    // with "clone"
    var newRow = addRow.clone();

    // set the values of the inputs
    // in the "Add" row to empty strings
    $('input', addRow).val('');

    // insert a remove link in the last cell
    $('td:last-child', newRow).html('<a href="" class="remove"><i class="icon-minus"><\/i><\/a>');


    // insert the new row into the table
    // "before" the Add row
    addRow.before(newRow);


    $(".datepick").datepicker();

    // add the remove function to the new row
    $('a.remove', newRow).click(function() {
        $(this).closest('tr').remove();
        return false;
    });

    $('#date', newRow).each(function(i) {
        var newID = 'date_' + newRowNum;
        $(this).attr('id', newID);

    });

    // prevent the default click
    return false;
});

// remove's default rows
$('.removeDefault').click(function() {
    $(this).closest('tr').remove();
    return false;
});