Entering data in the last row will auto add a new empty row below.
<table class="table table-striped">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-array="Rows" data-autoinsert="1">
    <tr>
        <td data-func="input" data-name="C1" data-placeholder="Enter text"></td>
        <td><input type="number" placeholder="Numbers only" name="C2"/></td>
        <td><input type="checkbox" name="C3"/></td>
        <td><select name="C4"><option>1</option><option>2</option><option>3</option></select></td>
        <td>
            <button data-action="remove"></button>
        </td>
    </tr>
    </tbody>
</table>

<br><br>
<b>Form data:</b>
<div id="Display"></div>

$(function() {

if (typeof $form !== "undefined")


    $form.on("modified", function() {
       var values = $form.Read();
        $("#Display").text(JSON.stringify(values));
    });    
})

Output templates

Templates used for document and web page generation: