Comment passer la table à la ligne pour former une table imbriquée via jQuery?

Question

J'ai un enregistrement dans DataTable avec une case à cocher. J'essaie d'ajouter une nouvelle table à la ligne en cliquant sur la case à cocher. J'essaie de faire quelque chose comme this.

Ici, ils prennent des valeurs de la ligne et le formatent et l'affichage. Mais j'ai une table complète différente que je veux montrer. Et j'essaye d'accomplir ceci avec la case à cocher.

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

Maintenant, je peux afficher ou masquer lorsque je coche ou décoche la case.

Table Sortons 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>"); 
} 

lorsque votre case à cocher checked puis passez ici la table ID de ligne puis ajouter table après tr. J'espère que cela vous aide.

Answer 2

Pouvez-vous essayer cela.

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