Differences

This shows you the differences between two versions of the page.

--- dokuwiki_add_caption [2021/06/07 23:35] – ↷ draft:dokuwiki_add_caption から dokuwiki_add_caption へページを移動しました。 admin
+++ dokuwiki_add_caption [2021/06/16 11:01] (current) – sasabe
@@ Line 4: / Line 4: @@
   * This is a small piece of Javascript code to add a caption to a table.
   * Works with DokuWiki's default template.
-  * Works with WRAP plugin.
+  * Needs WRAP plugin.
   * Just add a line of ''%%<WRAP caption>Caption text</WRAP>%%'' before the table.
@@ Line 12: / Line 12: @@
 <code javascript add_caption.js>
-jQuery('.page div.table>table').each(function (index) {
+jQuery('.page div.table>table').each(function () {
   let $table = jQuery(this);
   let $prevDiv = $table.parent().prev();
   if ($prevDiv.hasClass('wrap_caption') || $prevDiv.hasClass('caption')) {
-    let captionHtml = '<caption>' + $prevDiv.text().trim() + '</caption>';
+    if ($prevDiv.children('p').length > 0) {
-    $table.prepend(captionHtml);
+      let captionText = $prevDiv.children('p').html();
-    $prevDiv.remove();
+      $table.prepend('<caption>' + captionText + '</caption>');
+      $prevDiv.remove();
+      if (location.hash) {
+        location.href = location.hash;
+      }
+    }
   }
 });
@@ Line 87: / Line 92: @@
 | 3   | Scelerisque vestibulum metus risus |25 |
 | 4   | Nunc a commodo nullam | 200 |
+===== Mechanism =====
+The original HTML text is:
+<code html>
+<div class="wrap_caption">
+  <p> Caption text</p>
+</div>
+<div class="table">
+  <table>
+     ...
+  </table>
+</div>
+</code>
+This is transformed to:
+<code html>
+<div class="table">
+  <table>
+    <caption>Caption text</caption>
+    ...
+  </table>
+</div>
+</code>
+Since this transformation is made **after** the rendering by DokuWiki, the normal formatting syntax (such as ''%%//italic//%%'', ''%%__underline__%%'', etc.) can be used in the caption text.