LCIII LCIII - 9 days ago 9
Javascript Question

Add row to HTML table with Fixed Header

I have an HTML table with a fixed header. The code I used for the fixed header I found on Stack Overflow and I have the link in the code.

NOTE: I found one other thread similar to this one posted 4 months ago and it never got a response--the poster also didn't post any working JSfiddle, so I figure that warranted the posting of this separate thread.

The issue I'm having is trying to prepend a row to the HTML table using jquery.

$("#MaterialTable").find("tbody").prepend(function() {


The code worked just fine until I added the fixed header. Now I don't know how to address this issue. The link to the fiddle is below. You can see that the row is added to the table but it's outside of the scrollable portion.

JSFiddle: Adding a row to an HTML table with a fixed header

I don't post questions on here often, so please let me know if I've missed some obvious needed information.

Answer

The "scrollify" code duplicates the original table... incuding its ID. Therefore you end up with two elements with the same ID.

Immedately after the line var newTbl = oTbl.clone();, add this: newTbl.attr("id","");