Question

我正在尝试从具有庞大表格的html（附加代码段）文件中创建目录。

基本上，我想创建一个超链接的目录，该目录引用该表的第一和第二列，如下所示：

Table of Contents:

main 1
  one
  two
main 2
  one
  two

<pre><table border="1"><tr><th>main 1</th><td><table border="1"><tr><th>one</th><td><br><pre>blah blah blah<br></td></tr></pre><tr><th>two</th><td><br><pre>blah blah<br></td></tr></pre></table></td></tr><tr><th>main 2</th><td><table border="1"><tr><th>one</th><td><br>blah blah blah<br></td></tr><tr><th>two</th><td><br>blah blah blah<br></td></tr></table></td></tr></table></pre>

因此，当我们在目录中单击main1时，应将我们带到该表的main1部分，依此类推

编辑：目录需要添加到顶部的同一html文件中（如代码段所示）

我该怎么做？

Answer 1

修复表格代码中的错误-您可以通过querySelectorAll获取第th个元素的列表。我不喜欢嵌套表，但是我尝试忠于您开始使用的代码。

var contents = document.querySelectorAll('table th');

var contentStr ='';

contents.forEach(function(content){
  contentStr += '<li>'+ content.innerHTML + '</li>';
 })

document.getElementById('contents-list').innerHTML = contentStr;

<table border="1">
  <tr>
    <th>main 1</th>
    <td>
      <table border="1">
        <tr>
          <th>one</th>
          <td>blah blah blah</td>
        </tr>
        <tr>
          <th>two</th>
          <td>blah blah</td>
        </tr>
     </table>
   </td>
  </tr>
  <tr>
    <th>main 2</th>
    <td>
      <table border="1">
        <tr>
          <th>one</th>
          <td>blah blah blah</td>
        </tr>
        <tr>
          <th>two</th>
          <td>blah blah blah</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<hr/>
<ul id ="contents-list"></ul>

Answer 2

<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
<tr>
    <th colspan="2">Main 1</th>
    <th colspan="2">Main 2</th>
</tr>
  <tr>
    <th>One</th>
    <th>Two</th>

    <td>One</td>
    <td>Two</td>
  </tr>
  <tr>
    <td>Blah blah</td>
    <td>Blah blah</td>

    <td>Blah blah</td>
    <td>Blah blah</td>
  </tr>

</table>

</body>
</html>

Answer 3

您可以执行以下操作（更多信息here）：

    templateContent = document.querySelector('template').content;
    article = document.querySelector('article').cloneNode(true);
    article.querySelectorAll('*[id]').forEach((ele)=>{ele.removeAttribute('id')})
    article.attachShadow({  mode: 'closed' }).appendChild(templateContent.cloneNode(true));
    document.querySelector('#toc').appendChild(article);

article {
  counter-reset: heading;
}
article h2::before {
  counter-increment: heading;
  content: '0'counter(heading)': ';
}

      <template>
        <ul>
          <li>
            <a href='#h-1'><slot name='h-1'></slot></a>
            <ul>
              <li><slot name='sh-1-1'></slot></li>
              <li><slot name='sh-1-2'></slot></li>
            </ul>
          </li>
          <li>
            <a href='#h-2'><slot name='h-2'></slot></a>
            <ul>
                <li><slot name='sh-2-1'></slot></li>
                <li><slot name='sh-2-2'></slot></li>
              </ul>
          </li>
        </ul>
        <style>
          ul {
            list-style: none;
          }
        </style>
        </template>

        <div id='toc'></div>


        <article>
          <h2 id='h-1' slot='h-1'>Main 1</h2>
          <p>Main 1 Description...</p>
          
            <h3 slot='sh-1-1'>One</h3>
            <p>Blah blah blah</p >

            <h3 slot='sh-1-2'>Two</h3>
            <p>Blah blah</p >
          
          <h2 id='h-2' slot='h-2'>Main 2</h2>
          <p>Main 2 Description...</p>

            <h3 slot='sh-2-1'>One</h3>
            <p>Blah blah blah</p >

            <h3 slot='sh-2-2'>Two</h3>
            <p>Blah blah</p >
        </article>

如何从HTML表创建目录

3 个答案: