在父行下面添加可编辑行

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，并且我想在父行下面添加一个新的可编辑行。

以下是我到目前为止拥有的代码，它在末尾添加了新行。

Answer 1

在你的函数中

$('#myDataTable tbody td button').live('click', function () {
    var nTr = $(this).parents('tr')[0];
    $(myDataTable).dataTable().fnAddData(["test", "test1", "test2", "test3"]);
});

您永远不会使用nTr，并且在$(myDataTable)中，myDataTable不会在任何地方声明。