I have a table with 4 columns:
GL ID# |
GL Entry Date |
Description |
|
3137 |
06/26/2017 |
Invoice #18319: Date: 06/26/2017 |
GL ID# |
Debit Account |
Credit Account |
Debit Amount |
Credit Amount |
3137 |
105 |
|
185 |
|
3137 |
|
415 |
|
185 |
|
The first 3 columns are id, date, and description. The forth column is the detail subtable. I used JQuery to Move the subtable to a new row and added a toggle.
My problem is that after applying my code only every other detail toggle works and shows the details subtable. Row 1 won't expand. Row 2 acts normally. Row 3 won't expand. Row 4 acts normally. I'm not super versed in JQuery,
Yet, so I was having trouble finding the error. Included is the code and a JSFiddle:
Master/Detail Example . I believe that my error is in the scope of my toggle statement, but cannot find it. Could anyone help?
$(document).ready(function () {
var size = $("#gridT > thead > tr > th").length; // get total # of columns
var n = size.toString();
$("#gridT > thead > tr").prepend("<th></th>"); //prepend column to header row
$("#gridT > thead > tr > th").last().remove(); // remove last column header of master record
$("#gridT > thead > tr > th").prepend("<th></th>");
$("#gridT > tbody > tr").each(function () {
$(this).prepend(
$("<td></td>")
.addClass("hoverEff")
.addClass("icon")
.addClass("icon-exposed")
.attr('title', "click to show/hide Details")
);
//Get sub table from last column and add this to the next new added row
var table = $("table", this).parent().html();
//add new row with this subtable
$(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
$("table", this).parent().remove();
// ADD CLICK EVENT FOR MAKE COLLAPSIBLE
$('.hoverEff').click(function () {
var $pRow = $(this).parent('tr');
var $nextRow = $pRow.next('tr');
$nextRow.toggle();
$(this).toggleClass('icon-exposed icon-hidden');
});
});
//by default make all subgrid in collapse mode
$("#gridT > tbody > tr td.icon-exposed").each(function () {
$(this).toggleClass("icon-hidden icon-exposed");
$(this).parent().closest("tr").next().toggle();
});
});