td 中带有 html 的表格中的制表符答案

【问题标题】：Tabulator from table with html in tdtd 中带有 html 的表格中的制表符
【发布时间】：2022-01-09 10:00:39
【问题描述】：

我想将 Tabulator 5 用于 html

，其中。问题在于它将值转换为“<div class=”myCellValue”>value</div>”但我希望它插入原始的 html 内容。有没有办法做到这一点？

【问题讨论】：

包含另一个 html，例如：

value

标签： html tabulator

【解决方案1】：

一种方法是将列定义添加到表选项中，并使用带有div 的列的格式化程序：

var table = new Tabulator("#example-table", {
  columns: [
    {
      title: "Name"
    },
    {
      title: "Age"
    },
    {
      title: "Height"
    },
    {
      title: "Date of Birth"
    },
    {
      title: "Gender"
    },
    {
      title: "Color",
      formatter: (cell) => cell.getValue()
    },
  ]
})

.myCellValue {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/js/tabulator.min.js"></script>
<table id="example-table">
  <thead>
    <tr>
      <th width="200">Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Height</th>
      <th>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></td>
    </tr>
    <tr>
      <td>Mary May</td>
      <td>1</td>
      <td>female</td>
      <td>2</td>
      <td>
        <div class="myCellValue">value</div>
      </td>
      <td>14/05/1982</td>
    </tr>
  </tbody>
</table>

【讨论】：