将标准 HTML table元素转换为Tabulator表

以你之姓@ 2023-09-25 13:19 36阅读 0赞

可以将标准 HTML 表格元素转换为Tabulator，在创建表格时将所有数据直接从表格拉入制表器。

如果要从表中提取列标题，则需要确保已定义thead元素，每个列标题都在th元素。如果指定width属性，则将其设置为制表器中列的宽度。

以这种方式创建表时，您可以设置任何标准制表器选项，以便轻松转换旧表以利用制表器提供的众多功能。

标准 HTML 表格：






























Name Age Gender Height Favourite Color Date of Birth
Billy Bob 12 male 1 red 22/04/1994
Mary May 1 female 2 blue 14/05/1982

转换为制表器：

cc6f7103e12e403888642215f582ff38.png

源代码

.HTML

  1. <table id="example-table">
  2.     <thead>
  3.         <tr>
  4.             <th width="200">Name</th>
  5.             <th tabulator-hozAlign="center">Age</th>
  6.             <th>Gender</th>
  7.             <th>Height</th>
  8.             <th width="150">Favourite Color</th>
  9.             <th>Date of Birth</th>
  10.         </tr>
  11.     </thead>
  12.     <tbody>
  13.         <tr>
  14.             <td>Billy Bob</td>
  15.             <td>12</td>
  16.             <td>male</td>
  17.             <td>1</td>
  18.             <td>red</td>
  19.             <td>22/04/1994</td>
  20.         </tr>
  21.         <tr>
  22.             <td>Mary May</td>
  23.             <td>1</td>
  24.             <td>female</td>
  25.             <td>2</td>
  26.             <td>blue</td>
  27.             <td>14/05/1982</td>
  28.         </tr>
  29.     </tbody>
  30. </table>

JavaScript

  1. var table = new Tabulator("#example-table", {});

发表评论

表情：
评论列表 （有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

    相关 将 HTML 转换为概念块

    如果您需要将 HTML 导入到 Notion 中，您可能面临将 HTML 转换为 Notion 的块格式的挑战。在我最近的项目中，我偶然发现了这个问题并且无法找到任何提供解决方

    忘是亡心i忘是亡心i/ 0 赞/ 118 阅读

    相关 将Excel文件转换为Html

    背景 我的工作有时会涉及到财务数据的处理。我们大家都知道，Excel文件在处理数据中很流行并且被广泛使用。Excel让我们可以将存储在里面的数据进行数学计算。我在工作中使

    布满荆棘的人生布满荆棘的人生/ 0 赞/ 114 阅读