如何将我网站上的所有表格标题定义为JavaScript中的锚点

How do I define all table captions on my website as anchors in JavaScript?

本文关键字：定义 标题 JavaScript 表格 网站      更新时间：2023-09-26

我有一个Jekyll驱动的GitHub页面网站，我想在上面超链接到我的帖子中我的表格所在的位置，目前我知道如何做到这一点的唯一方法是在表格前面放一个标题。这反过来又使我可以超链接到表前面的标题。例如https://fusion809.github.io/2015/12/27/comparison-of-free-operating-systems/#programming-languages链接到我的"自由操作系统的比较"帖子中的"编程语言"标题，该帖子接近但不在我题为"表1：常见编程语言的比较"的表格之前。有没有一种方法可以通过修改我的网站的JavaScript来锚定所有的表标题（用<table>和</table>标签之间的<caption>标签定义）？我的表名（或标题）通常很长，所以如果可以为每个表使用一个计数器，根据它们在我帖子中的位置给它们一个数字，然后将其用于超链接？例如，对于前面提到的帖子，我的第一个表将有URLhttps://fusion809.github.io/2015/12/27/comparison-of-free-operating-systems/#table1.

请尝试将你的答案简化为简单的操作，就像我需要添加到我的网站的JavaScript、CSS或HTML中一样，因为我的编程/标记知识还处于初级阶段，因此，如果你通过我，我很可能会被淹没。

您不需要锚点或其他附加标签——文档中的任何id都可以通过http://example.com/mypage#someid 链接到

假设标题文本是唯一的，您可以循环浏览每个标题文本，并根据其文本（删除非字母数字字符后）为其提供id。我在每个id前面加了"table-"，并降低了它们的小写字母。

在本例中，您最终会得到可用的#table-one、#table-two和#table-threefour链接：

$('caption').each(
  function() {
    var cap = this;
    var text = $(cap).text();
    // just a-z, 0-9, - and _
    var id = text.replace(/[^a-z0-9'-'_]/g, '').toLowerCase();
    cap.id = "table-" + id;
  }
);
table {
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <caption>one</caption>
  <tr>
    <td>td</td>
  </tr>
</table>
<table>
  <caption>Two</caption>
  <tr>
    <td>td</td>
  </tr>
</table>
<table>
  <caption>three four</caption>
  <tr>
    <td>td</td>
  </tr>
</table>

如果字幕不是唯一的，您可以使用计数器，只给它们id，如#table1、#table2等。

var counter = 0;
$('caption').each(
  function() {
    ++counter;
    this.id = 'table-' + counter;
  }
);
相关文章：