Forum How do I...?

Rendering a footnote in a table directly under the table

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.
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;

In the attached example, you can see how polyfills are used to teach Prince about the "closest" and "after" methods.
  1. foo.html2.4 kB

Edited by howcome