Question

我在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;
    }

Answer 1

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

选中复选框后，在此处传递表格行ID，然后在tr之后追加表格。我希望它可以帮助你。

Answer 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;
    }

如何通过jQuery传递表到行来形成嵌套表？

2 个答案: