如何通过 jQuery 将表传递给行以形成嵌套表？答案

【问题标题】：How to pass table to row to form nested table through jQuery?如何通过 jQuery 将表传递给行以形成嵌套表？
【发布时间】：2017-07-26 10:44:41
【问题描述】：

我在 DataTable 中有一个带有复选框的记录。我试图在单击复选框时将新表附加到行。我正在尝试做类似this 的事情。

在这里，他们从行中获取值并将其格式化并显示回来。但我有完整的不同表格要展示。我正在尝试使用复选框来实现这一点。

$('#tblEmployees').on('click', 'input[type="checkbox"].checkbox', function() {
    var tr = $(this).closest('tr');
    var Table = getTasks('Here I will pass my value to get Table through Ajax');
});

现在，当我选中或取消选中复选框时，我可以显示或隐藏。

通过 Ajax 获取表格

       function getTasks(id) {

        // Creating Inner table with little Styling
        var table = $('<table width="90%" style="margin: 0 auto;">');

        // Adding
        var titleRow = $('<tr>');
        titleRow.append('<th> Task # </th>');
        titleRow.append('<th> Task Description </th>');
        table.append(titleRow);

        $.ajax({
            url: '@Url.Action("GetTasks", "Programs")',
            data: { id: id },
            cache: false,
            type: "GET",
            success: function (data) {
                $.each(data, function (key, value) {

                    var row = $('<tr>');

                    row.append('<td>' + value.TaskNo + '</td>');
                    row.append('<td>' + value.TaskDescription + '</td>');

                    table.append(row);
                });
            }
        });
        return table;
    }

【问题讨论】：

也粘贴表格的代码。所以我们可以为您提供帮助。
表我正在通过 ajax 或父表？
父表供参考

标签： jquery nested-table

【解决方案1】：

function selectColumn(rowID) {
    var tr = $('#tbCategory tbody tr[data-id=' + rowID + ']').after("<tr><td>Hi, It's Worked</td></tr>");
}

当您的复选框被选中时，然后在此处传递表格行 ID，然后在 tr 之后附加表格。希望对你有帮助。

【讨论】：

【解决方案2】：

你能试试这个吗？

$('#tblEmployees').on('click', 'input[type="checkbox"].checkbox', function() {
        var tr = $(this).closest('tr');
        var Table = getTasks('yourID' , tr);
    });


function getTasks(id, parentRow) {

        // Creating Inner table with little Styling
        var table = $('<table width="90%" style="margin: 0 auto;">');

        // Adding
        var titleRow = $('<tr>');
        titleRow.append('<th> Task # </th>');
        titleRow.append('<th> Task Description </th>');
        table.append(titleRow);

        $.ajax({
            url: '@Url.Action("GetTasks", "Programs")',
            data: { id: id },
            cache: false,
            type: "GET",
            success: function (data) {
                $.each(data, function (key, value) {

                    var row = $('<tr>');

                    row.append('<td>' + value.TaskNo + '</td>');
                    row.append('<td>' + value.TaskDescription + '</td>');

                    table.append(row);
                });
parentRow.append(table.html())
            }
        });
        return table;
    }

【讨论】：