一样的table？不一样的table(可编辑状态table)

一、一样的table？

在网页设计中，我们常常需要展示大量的数据，而传统的数据展示方式往往是使用表格。表格可以让数据更加井然有序地呈现出来，更容易阅读和理解。但在实际设计过程中，我们往往需要对表格进行一些定制化的设计，比如调整表头样式、改变单元格背景色等等，这就要求我们能够将表格进行灵活的排版和格式化。

对于简单的表格，我们可以通过 HTML 标签和 CSS 样式对其进行处理，如下所示：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

通过定义相应的 CSS 样式，我们可以对表格进行一些简单的样式调整。

二、不一样的table(可编辑状态table)

对于复杂的表格，我们需要更加灵活的排版和格式化方式。此时，我们可以使用专门的表格插件或库来帮助我们进行表格的排版和格式化。

以 Handsontable 为例。Handsontable 是一个开源的 JavaScript 表格插件，可以让表格呈现出 Excel 那样的功能和性能。它提供了一些便利工具和 API，让我们可以定制化地对表格进行处理。

以下是一个简单的 Handsontable 表格示例：

<div id="example"></div>

<script>
  var data = [
    ['A1', 'B1', 'C1', 'D1'],
    ['A2', 'B2', 'C2', 'D2'],
    ['A3', 'B3', 'C3', 'D3'],
    ['A4', 'B4', 'C4', 'D4']
  ];

  var container = document.getElementById('example');
  var hot = new Handsontable(container, {
    data: data
  });
</script>

这个表格是一个简单的四行四列的表格。我们可以通过 Handsontable 提供的 API 来进行表格的调整和定制化操作。比如：

• 设置单元格的样式和值

hot.setCellMeta(2, 0, 'className', 'my-class');
hot.setDataAtCell(2, 0, 'Hello World!');

这样就可以将第 2 行第 1 列的单元格的样式设置为 my-class，同时设置其值为 Hello World！。

• 控制单元格的编辑状态

hot.getCellMeta(2, 0).readOnly = true;

这样就可以将第 2 行第 1 列的单元格设置为只读，禁止用户编辑它。

三、示例说明

示例 1：

假设我们需要展示一个销售报表，其中包含产品名称、销售数量和销售总额信息。我们可以使用以下代码进行表格的排版和格式化。

<div id="sales-report"></div>

<script>
  var data = [
    ['产品名称', '销售数量', '销售总额'],
    ['产品 A', 100, 10000],
    ['产品 B', 200, 20000],
    ['产品 C', 300, 30000],
    ['产品 D', 400, 40000]
  ];

  var container = document.getElementById('sales-report');
  var hot = new Handsontable(container, {
    data: data,
    colWidths: [150, 150, 150],
    colHeaders: true,
    rowHeaders: true
  });
</script>

这个表格将产品名称、销售数量和销售总额信息对应排列在一起，可以更方便地进行查看和比较。同时，我们还可以设置各列的宽度和标题。

示例 2：

假设我们需要展示一个团队任务清单，其中包含任务名称、负责人、状态和优先级信息。我们可以使用以下代码进行表格的排版和格式化。

<div id="task-list"></div>

<script>
  var data = [
    ['任务名称', '负责人', '状态', '优先级'],
    ['任务 A', '张三', '未完成', '高'],
    ['任务 B', '李四', '进行中', '中'],
    ['任务 C', '王五', '已完成', '低']
  ];

  var container = document.getElementById('task-list');
  var hot = new Handsontable(container, {
    data: data,
    colWidths: [150, 150, 150, 150],
    colHeaders: true,
    rowHeaders: true
  });

  // 设置单元格格式
  hot.getCellMeta(0, 2).renderer = function(instance, td, row, col, prop, value, cellProperties) {
    if (value === '未完成') {
      td.style.color = 'red';
    }
    else if (value === '进行中') {
      td.style.color = 'orange';
    }
    else if (value === '已完成') {
      td.style.color = 'green';
    }
    Handsontable.renderers.TextRenderer.apply(this, arguments);
  };

  // 设置单元格样式
  hot.getCellMeta(2, 3).className = 'cell-status-low';
  hot.getCellMeta(1, 3).className = 'cell-status-medium';
  hot.getCellMeta(0, 3).className = 'cell-status-high';
</script>

<style>
  .cell-status-high {
    background-color: #ffe6e6;
  }
  .cell-status-medium {
    background-color: #ffff99;
  }
  .cell-status-low {
    background-color: #ccffe5;
  }
</style>

这个表格将任务名称、负责人、状态和优先级信息对应排列在一起，同时还对其中的数据进行了格式化和样式设计。比如，根据状态信息，我们将未完成、进行中和已完成分别用红、橙、绿色进行区分；根据优先级信息，我们将高、中、低分别用不同的背景颜色进行区分。这样的设计让任务清单更加清晰易读，同时也便于我们进行任务的管理和操作。