How to pass table to row to form nested table through jQuery?

Question

I have a records in DataTable with a checkbox. I am trying to append new table to the row on clicking the checkbox. I am trying to do something like this.

Here they are taking values from row and formatting it and displaying back. But I have complete different table that I want to show.And I'm trying to achieve this with checkbox.

$('#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');
});

Now, I can display or hide when I check or un-check the checkbox.

Table Getting through 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;
    }

Paste the code of your table also. So we can help you. – Jithin Raj P R Jul 26 '17 at 10:49 — Jithin Raj P R, Jul 26 '17 at 10:49
Table Im getting through ajax or parent table? – Ali Sheikh Jul 26 '17 at 10:51 — Ali Sheikh, Jul 26 '17 at 10:51
Parent table for reference – Jithin Raj P R Jul 26 '17 at 11:06 — Jithin Raj P R, Jul 26 '17 at 11:06

score 0 · Answer 1 · answered Jul 26 '17 at 11:00

0

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

when your checkbox checked then pass here table row ID then append table after tr. I hope it helps you.

answered Jul 26 '17 at 11:00

Neeraj Pathak

759
4
13

score 0 · Answer 2 · answered Jul 26 '17 at 11:12

Can you try this.

$('#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;
    }

How to pass table to row to form nested table through jQuery?

2 Answers2