一个小型jQuery插件，它可以将普通的HTML表转换为可编辑的表，并支持数据转换和值验证。

更多功能：

• 单击单元格开始编辑。
• 在表单元格发生更改后执行函数。
• 复制（重复）表行。
• 动态数据渲染。

如何使用它:

1.要开始，请包括jquery-可编辑表.min.js加载最新的jQuery库之后。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery-editable-table.min.js"></script>

2.创建一个带有预定义标题单元格的空HTML表。

<table id="example-table" class="my-table">
   <thead>
     <tr>
       <th>Id</th>
       <th>Custom Color Example</th>
       <th>Secret Value</th>
       <th>Number Example</th>
     </tr>
   </thead>
   <tbody>
   </tbody>
</table>

3.初始化插件并为每列配置可编辑的单元格。

let myEditableTable = $('#example-table').editableTable({
    columns: [
      // column 1
      {
        index: 0,
        name: 'id',
        removeRowIfCleared: true,
        isValid: (newVal, data) => {
          // do something
        }
      },
      // column 2
      {
        index: 1,
        name: 'color',
        classes: ['text-center'], // additional CSS classes
        isValid: (newVal, data) => {
          // do something
        }
        afterAdd: function (addedColor, cell) {
          // do something
        }
        afterChange: function (newColor, cell) {
          // do something
        }
        convertOut: (outgoingVal) => {
          // do something
        }
      },
      // hidden column
      {
        index: 2,
        name: 'secretValue',
        isHidden: true
      },
      // column 4
      {
        index: 3,
        name: 'number',
        classes: ['text-end'],
        isValid: (val) => {
          val = parseInt(val);
          return !isNaN(val) && Number.isInteger(val);
        },
        convertOut: (outgoingVal) => {
          // Convert to a number
          return Number(outgoingVal);
        },
      }
    ]
});

4.使用您提供的数据填充HTML表。

myEditableTable.setData([
  {
    id: 0,
    color: '#eb348c',
    number: 321,
    secretValue: 'secret0'
  },
    {
    id: 1,
    color: '#34bdeb',
    number: 123,
    secretValue: 'secret1'
  },
      {
    id: 2,
    color: '#000',
    number: 666,
    secretValue: 'secret2'
  }
]);

5.向可编辑表中添加新行。

myEditableTable.addRow({
  id: 5, 
  color: '#FFFFFF', 
  number: 0, 
  secretValue: 'secretNewwwww',
});

6.将动作按钮添加到每一行。

let myEditableTable = $('#example-table').editableTable({
    columns: [
      // columns
    ],
    actions: [
      {
        label: '<button>Delete</button>',
        action: (e, row) => {
          // Remove the row from the table
          row.remove();
        }
      },
    ]
});

7.获取当前表格数据。

myEditableTable.getData();

8.清除所有表格数据。

myEditableTable.clear();

更新日志：

2022-12-28

• 删除了格式错误的XHTML（空属性）

2022-01-05

• 添加了“操作列”以添加基于行的按钮

2021-12-04

• 格式化更改

2021-09-27

• Bugfix:索引错误

预览截图

数据转换和验证功能 小型可编辑表