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

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

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

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

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

#### **标准 HTML 表格：** ####

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Age</th> 
   <th>Gender</th> 
   <th>Height</th> 
   <th>Favourite Color</th> 
   <th>Date of Birth</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Billy Bob</td> 
   <td>12</td> 
   <td>male</td> 
   <td>1</td> 
   <td>red</td> 
   <td>22/04/1994</td> 
  </tr> 
  <tr> 
   <td>Mary May</td> 
   <td>1</td> 
   <td>female</td> 
   <td>2</td> 
   <td>blue</td> 
   <td>14/05/1982</td> 
  </tr> 
 </tbody> 
</table>

#### **转换为制表器：** ####

![cc6f7103e12e403888642215f582ff38.png][]

源代码

#### **.HTML** ####

<table id="example-table">
        <thead>
            <tr>
                <th width="200">Name</th>
                <th tabulator-hozAlign="center">Age</th>
                <th>Gender</th>
                <th>Height</th>
                <th width="150">Favourite Color</th>
                <th>Date of Birth</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Billy Bob</td>
                <td>12</td>
                <td>male</td>
                <td>1</td>
                <td>red</td>
                <td>22/04/1994</td>
            </tr>
            <tr>
                <td>Mary May</td>
                <td>1</td>
                <td>female</td>
                <td>2</td>
                <td>blue</td>
                <td>14/05/1982</td>
            </tr>
        </tbody>
    </table>

#### **JavaScript** ####

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

[cc6f7103e12e403888642215f582ff38.png]: https://img-blog.csdnimg.cn/cc6f7103e12e403888642215f582ff38.png