Is it possible to render footnotes that are placed in text inside a table cell so the footnote appears directly under the table instead of at the bottom of the page? This is a common way to present footnotes in a table. Thanks!
You cannot use the @footnotes construct for this. But it's a fairly mechanical process to move the footnote element so that it appears after the table element. A few lines of Javascript should be able to to this.
Thanks howcome. What if there are two tables on a page that both have footnotes. Can the Javascript know to place the correct footnotes at the bottom of the related table? I don't know JavaScript and would need to get some help to figure out how to do this.
Here's a simple example of how to use plain JavaScript to (a) look for tablenotes marked with the "fn" class (b) move them to after the table (c) leave a table call in their original position.
var elems = document.querySelectorAll(".fn");
var tnc = 1;
for (var i = 0; i < elems.length; i++) {
var str = elems[i].innerHTML;
var table = elems[i].closest("table");
if (table) {
elems[i].innerHTML = "[" + tnc + "]";
var note = document.createElement("p");
note.innerHTML = "[" + tnc + "] " + str;
table.after(note);
tnc++;
}
}
In the attached example, you can see how polyfills are used to teach Prince about the "closest" and "after" methods.
