JSFiddle

Christopher's public fiddles

• jQuery addClass example

  Change class name on click in jQuery

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Datatables with child rows and colspan

  This is really a nested table with shared headers, with a parent row that uses colspan for the wide message field, a child row for the wide pattern field, and another child row with the details. The next step is adding editing to the two child rows, but not the parent row.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Datatables with three levels, nested datatables, synchronized column widths, and editor integration

  This is a nested table with shared headers, a parent row that uses colspan for the wide message field, a child row for the wide pattern field, and another child row with the details, with additional child rows for field-based enrichment. The datatables editor integration is commented out since a license is a needed, but it works in my local install. The next step is adding editing to the pattern row, and buttons to add new rows

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Datatables with child rows and field conditions

  This is really a nested table with shared headers, with a parent row that uses colspan for the wide message field, a child row for the wide pattern field, and another child row with the details. The next step is adding editing to the two child rows, but not the parent row.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Datatables with editable child tables using a hidden table to coordinate column widths

  This is a nested table with shared headers, with a parent row that uses colspan for the wide message field, a child row for the wide pattern field, and another child row with a table for the details. The width of the top-level headers, and of the detail table headers are set by finding the longest strings from each column, adding them to a hidden datatable, drawing the table, checking the sizes, then updating the top-level column and detail table columns to match the hidden table. A bit convoluted, and very hackish implementation, but it works.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Datatables with child rows and colspan

  This is really a nested table with shared headers, with a parent row that uses colspan for the wide message field, a child row for the wide pattern field, and another child row with the details. The next step is adding editing to the two child rows, but not the parent row.

• Private fiddle Extra
• Delete fiddle
Groups Extra