js操作table元素实现表格行列新增、删除技巧总结

准备工作

```html

```

增加行列

增加行列通常涉及到 DOM 的操作。例如，我们可以使用 `insertRow()` 和 `insertCell()` 方法来动态添加新的行和单元格。示例代码如下：

```javascript

var table = document.getElementById('myTable');

var newCell = newRowsertCell(0); // 创建第一个单元格并设置内容等。

newCellnerHTML = "新序号"; // 添加内容或其他HTML元素等。

```

这样就可以实现在指定位置添加新的行和单元格。同样地，我们可以使用类似的方法来添加列。

删除行列

```javascript

// 删除指定行（假设要删除第2行）

table.deleteRow(1); // 注意这里的索引是从0开始的，所以删除第二行应该使用索引1。

TableTool.js 功能介绍

三、单元格与行的移动

`moveUp` 和 `moveDown` 函数：分别实现单元格或行的上移和下移功能。支持传入最小移动位置、需要移动的对象（默认为当前事件对象所在单元格）以及是否保留原单元格值的选项。

四、赋值单元格样式

`cloneStyle` 函数：将模板单元格的样式复制到目标单元格上。传入模板单元格和目标单元格对象。

五、新增行和列

`calculateSpanWidth` 函数：计算 Span 的宽度，根据当前 span 外的单元格的宽度。支持传入容器对象，或为空时遍历页面上所有的 Span 对象。