jquery - 親行の下に編集可能な行を追加する

Question

@{
    Layout = "~/Views/Company/JQueryDataTableEditableLayout.cshtml";
}

@section head{

<script language="javascript" type="text/javascript">
$(document).ready(function () {
    $('#myDataTable').dataTable().makeEditable({
        "aoColumns": [
        null,
        null, {
            tooltip: 'Double-Click'
        }, {
            tooltip: 'Double-Click to select Code'
        }]
    });
    $('#myDataTable tbody td button').live('click', function () {
        var nTr = $(this).parents('tr')[0];
        $(myDataTable).dataTable().fnAddData(["test", "test1", "test2", "test3"]);
    });
});
</script>
}

<div id="demo">
    <h1>Basic Example</h1>
    <table id="myDataTable" class="display">
        <thead>
            <tr>
                <th>Company name</th>
                <th>Address</th>
                <th>Town</th>
                <th></th>
            </tr>
        </thead>
        <tbody>

            @{

                foreach (var item in Model)

            {

                <tr>
                    <td>@item.Name</td>
                    <td>@item.Address</td>
                    <td>@item.Town</td>
                    <td> <button id= "@item.ID"  name="Split" >SplitLine</button></td>
                </tr>

            }
            }
        </tbody>
    </table>

</div>

私は datatable editable を使用しており、親行の下に新しい編集可能な行を追加したいと考えています。

ここに私がこれまでに持っているコードがあり、新しい行を最後に追加しています。