JavaScript实现文本编辑器 【table相关操作】

JavaScript
Word count: 5.1k   |   Reading time≈ 27 min 
  我自己写的基本操作可以实现
  就是table结构改变了之后 在操作会出现一些问题
  目前没想通要怎么处理 
  查了下看到一个大佬用jQuery写的合并拆分
  基本把我的一些bug解决了 但是我没有看懂他的逻辑QAQ

页面结构

table的底部和侧边有一个 + 号标记可以添加行/列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
	<div>
		<button onclick="delTable()">delete</button>
		<button onclick="addCell()">addCell</button>
		<button onclick="addRow()">addRow</button>
		<button onclick="mergeTable()">合并单元格</button>
		<button onclick="mergeDown()">向下合并单元格</button>
		<button onclick="mergeRight()">向右合并单元格</button>
		<button onclick="splitTable()">拆分单元格</button>
	</div>
	<br>
	<div class="container">
		<div class="table"  contentEditable='true' >
			<table border="1" id="table">
				...
			</table>
		</div>
		<div id="addCell" onclick="addCell()">+</div>
		<div id='addRow' onclick="addRow()">+</div>
	</div>
</body>

删除功能

1
2
3
  delTable: function () {
	this.table.remove() //dom自带方法
},

添加列功能

trObject.insertCell( index )

insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
新单元格将被插入当前位于 index 指定位置的表元之前。如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。

1
2
3
4
5
6
7
8
9
10
11
12
13
  /**
   *  insertCell( index ) table的原生方法,参数传的是添加的位置
   * 需要注意的是添加之后要重新给列表宽度赋值
  */
  addCell: function () {
	for (let i = 0; i < table.rows.length; i++) {
		var newCell = table.rows[i].insertCell(this.table.colspan)
		newCell.innerHTML = 'new add'
		for (let j = 0; j < table.rows[i].cells.length; j++) {
			this.table.rows[i].cells[j].style.width = 900 / this.table.rows[0].cells.length + 1 + 'px'
		}
	}
},

添加行功能

tableObject.insertRow( index )

insertRow() 方法用于在表格中的指定位置插入一个新行。
index : 指定插入新行的位置 (以 0 开始)。

1
2
3
4
5
6
7
8
9
  /**
   * 被注释的那一段的想法是 在哪点击了就以点击的那一行为模板 在那行下面添加该行内容
   * 但是右侧的添加行功能 不能实现这一操作 就直接获取的第一行的内容来添加 
   * 应该是有bug的
  */
  addRow: function () {
	var newRow = this.table.insertRow(this.table.rowspan)
	newRow.innerHTML = this.table.rows[0].innerHTML //document.getSelection().getRangeAt(0).startContainer.parentNode.innerHTML
},

合并功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
  /**
   * 这个是我写的 直接获取选中的td 然后替换删除
   * 没有考虑到已经合并的情况 是有问题的
 * 我的想法是获取带有选中类的节点，创建一个新的节点 去替换
 * 其余的选中的节点自己删除
  */
  mergeTable: function () {
	var nodes = this.table.getElementsByClassName('ui-selected')
	var newNode = document.createElement('td')
	var parent = nodes[0].parentNode
	newNode.rowSpan = this.table.rowspan
	newNode.colSpan = this.table.colspan
	parent.replaceChild(newNode, nodes[0])
	while (nodes[0]) {
		nodes[0].remove()
    }
  }
  /**
   * 这个是CSDN某大佬借助jquery写的 我没看懂QAQ
   * 原文地址 2楼： https://bbs.csdn.net/topics/391807641 
  */
  mergeTable: function () {
	var $t = $("#" + this.tableId);
	if ($("table", $t).length > 0) {
		alert("不支持嵌套表格！");
		return;
	}

	var sigDel = "sign4delete"; // 删除标记，用作类名
	var sigSel = "ui-selected"; // 选中标记，用作类名

	// 补充单元格以便后继正确计算坐标
	$("th,td", $t).each(function () {
		// 坐标要实时计算，因会实时补充
		var ridx = $("tr", $t).index($(this).parent("tr"));
		var cidx = $(this).parent().children("th,td").index(this);

		var rowspan = Number($(this).attr("rowspan")) || 1;
		var colspan = Number($(this).attr("colspan")) || 1;
		var isSel = $(this).hasClass(sigSel);
		// 非选单元格拆出的单元格要加删除标记
		if (rowspan <= 1 && colspan <= 1)
			return;
		// 跨格开插
		$("tr", $t).each(function () {
			var idx = $("tr", $t).index(this);
			var arr, $td = $("<td>").addClass(isSel ? sigSel : sigDel);

			if (idx == ridx) {
				// 本行在 [cidx] 后插入 colspan-1 个

				arr = $(); // 准备待插单元格
				for (var i = 0; i < colspan - 1; i++)
					arr = arr.add($td.clone());
				// 插入
				$("th,td", this).eq(cidx).after(arr);

			} else if (ridx < idx && idx < ridx + rowspan) {
				// 以下行在 [cidx] 前插入 colspan 个

				arr = $(); // 准备待插单元格
				for (var i = 0; i < colspan; i++)
					arr = arr.add($td.clone());
				// 插入
				if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
					$("th,td", this).eq(cidx - 1).after(arr);
				else if ($("th,td", this).eq(cidx).length > 0)
					$("th,td", this).eq(cidx).before(arr);
				else
					$(this).prepend(arr);
			}
		});
	});

	var rmin = 10000,
		cmin = 10000;
	var rmax = 0,
		cmax = 0;
	var rnum, cnum;
	// 计算起始和跨距
	$("th,td", $t).filter("." + sigSel).each(function () {
		var ridx = $("tr", $t).index($(this).parent("tr"));
		rmin = ridx < rmin ? ridx : rmin;
		rmax = ridx > rmax ? ridx : rmax;
		var cidx = $(this).parent().children("th,td").index(this);
		cmin = cidx < cmin ? cidx : cmin;
		cmax = cidx > cmax ? cidx : cmax;
	});
	rnum = rmax - rmin + 1;
	cnum = cmax - cmin + 1;

	// 合并单元格
	$("th,td", $t).each(function () {
		var ridx = $("tr", $t).index($(this).parent("tr"));
		var cidx = $(this).parent().children("th,td").index(this);
		// 标记单元格待删
		if (rmin <= ridx && ridx <= rmax &&
			cmin <= cidx && cidx <= cmax)
			$(this).addClass(sigDel);
		// 处理被选左上角单元格
		if (ridx == rmin && cidx == cmin)
			$(this).removeClass(sigDel).attr({
				rowspan: rnum,
				colspan: cnum
			});
		// 清理残余
		if ($(this).attr("rowspan") == 1) $(this).removeAttr("rowspan");
		if ($(this).attr("colspan") == 1) $(this).removeAttr("colspan");
	}).remove("." + sigDel);
},

向下合并功能

1
2
3
4
5
6
7
8
9
  mergeDown: function () {
	var row = document.getSelection().anchorNode.parentNode.rowIndex
	var cell = document.getSelection().anchorNode.cellIndex
	var node = document.getSelection().anchorNode
	if (row != this.table.rows.length - 1 && node.rowSpan == 1) {
		node.rowSpan = 2
		this.table.rows[row + 1].cells[cell].remove()
	}
},

向右合并功能

1
2
3
4
5
6
7
8
  mergeRight: function () {
	var cell = document.getSelection().anchorNode.cellIndex
	var node = document.getSelection().anchorNode
	if (cell != 0 && node.colSpan == 1) {
		node.previousElementSibling.remove()
		node.colSpan = 2
	}
},

拆分功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
  /**
   * 我实现的 因为在ueditor里面是只可以拆分两格的
   * 我就按照它的写的 只能拆分两格的
   * 但是多格拆分应该也差不多
  */
 splitTable: function () {
	var node = document.getSelection().anchorNode
	var td = document.createElement('td')
	if (node.rowSpan == 2 && node.colSpan == 1) {
		node.rowSpan = 1
		node.parentNode.nextElementSibling.appendChild(td)
	} else if (node.colSpan == 2 && node.rowSpan == 1) {
		node.colSpan = 1
		node.parentNode.appendChild(td)
	}
},

  /**
   * 也是那个大佬的代码 可以拆分多个单元格
  */
  splitTable: function(){
	var $t = $("#"+this.tableId);
		
		if ($("table", $t).length > 0) {
			alert("不支持嵌套表格！");
			return;
		}
		
		var sigDel = "sign4delete";  // 删除标记，类名，自定义
		var sigSel = "ui-selected";  // 选中标记，类名，jQuery UI 定义
		
		// 补充单元格以便后继正确计算坐标
		$("th,td", $t).each(function(){
			// 坐标要实时计算，因会实时补充
			var ridx = $("tr", $t).index($(this).parent("tr"));
			var cidx = $(this).parent().children("th,td").index(this);
			var rowspan = Number($(this).attr("rowspan")) || 1;
			var colspan = Number($(this).attr("colspan")) || 1;
			var isSel = $(this).hasClass(sigSel);
			// 非选单元格拆出的单元格要加删除标记
			
			if (rowspan <= 1 && colspan <= 1)
				return;
			
			if (isSel)
				$(this).removeAttr("colspan").removeAttr("rowspan");
			
			// 跨格开插
			$("tr", $t).each(function(){
				var idx = $("tr", $t).index(this);
				var arr, $td = $("<td>");
				
				if (!isSel)
					$td.addClass(sigDel);
				
				if (idx == ridx) {
					// 本行在 [cidx] 后插入 colspan-1 个
					
					arr = $();  // 准备待插单元格
					for (var i=0; i < colspan-1; i++)
						arr = arr.add($td.clone());
					
					$("th,td", this).eq(cidx).after(arr);
					
				} else if (ridx < idx && idx < ridx + rowspan) {
					// 以下行在 [cidx] 前插入 colspan 个
					
					arr = $();  // 准备待插单元格
					for (var i=0; i < colspan; i++)
						arr = arr.add($td.clone());
					
					if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
						$("th,td", this).eq(cidx - 1).after(arr);
					else if ($("th,td", this).eq(cidx).length > 0)
						$("th,td", this).eq(cidx).before(arr);
					else
						$(this).prepend(arr);
				}
			});
		});
		
		// 重新获取以取到删者并删之
		$("th,td", $t).remove("." + sigDel);
},

鼠标长按选中事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
   /**
    * 点击选取范围那还是有问题的不知道怎么解决
    * 主要是针对已经合并的单元格 怎么遍历的问题
   */
   this.table.onmousedown = function (e) {
	// 鼠标按下的时候获取所在单元格的坐标，和鼠标按下的时间
	this.startRow = e.target.parentNode.rowIndex
	this.startCell = e.target.cellIndex
	this.startDate = new Date()
   }
   
   this.table.onmouseup = function () {
	// 通过和鼠标抬起事件所获取的时间进行对比 判断是否是长按鼠标事件
	var isClick = new Date() - this.startDate < 500 ? true : false;

	// 获取鼠标抬起时 鼠标所在单元格的坐标点
	var endCell = event.target.cellIndex
	var endRow = event.target.parentNode.rowIndex

	if (!isClick) {
		for (let i = Math.min(endRow, this.startRow); i <= Math.max(endRow, this.startRow); i++) {
			for (let j = Math.min(endCell, this.startCell); j <= Math.max(endCell, this.startCell); j++) {
				// 以获取对角坐标 填充选中的区域  只能针对结构未改变的table
				//this.rows[i].cells[j].className = 'ui-selected'

				if (this.rows[i].cells[j]) {
					if (this.rows[i].cells[j].rowSpan > 1) {
						if (j == Math.max(endCell, this.startCell)) {
							for (let a = 1; a < this.rows[i].cells[j].rowSpan; a++) {
								if(this.rows[i + a].cells[j]){
									this.rows[i + a].cells[j].className = 'del'
								}
							}
						}else if((j + table.rows[i].cells[j].colSpan - 1 )== Math.max(endCell, this.startCell)){
							for (let a = 1; a < this.rows[i].cells[j].rowSpan; a++) {
								for (let b = 0; b < this.rows[i].cells[j].colSpan; b++) {
									if (this.rows[i + a].cells[j+b]) {
										this.rows[i + a].cells[j+b].className = 'del'
									}
								}
							}
						} else {
							 var maxJ = Math.max(endCell, this.startCell)
							for (let a = 0; a < this.rows[i].cells[j].rowSpan; a++) {
								if (table.rows[i + a].cells[maxJ]) {
									this.rows[i + a].cells[maxJ].className = 'del'
								}
							} 
						}
					}

					if (this.rows[i].cells[j].colSpan > 1) {
						if (j !== endCell && j !== this.startCell) {
							for (let b = 1; b < this.rows[i].cells[j].colSpan; b++) {
								if(this.rows[i].cells[j + b]){
									this.rows[i].cells[j + b].className = 'del'
								}			
							}
						}else if((j + table.rows[i].cells[j].colSpan - 1 )== Math.max(endCell, this.startCell)){
							for (let a = 0; a < this.rows[i].cells[j].rowSpan; a++) {
								for (let b = 1; b < this.rows[i].cells[j].colSpan; b++) {
									if (this.rows[i + a].cells[j+b]) {
										this.rows[i + a].cells[j+b].className = 'del'
									}
								}
							}	
						} 
						else {
							this.rows[i].cells[j].className = ''
						}
					}
					this.rows[i].cells[j].className += 'ui-selected'
				}
			}
		}
		// 在table中增加两个属性 获取到跨的行和列 供合并单元格
		this.rowspan = Math.abs(endRow - this.startRow) + 1
		this.colspan = Math.abs(endCell - this.startCell) + 1

	} else {
		// 清空样式
		this.rowspan = endRow
		this.colspan = endCell
		for (let i = 0; i < table.rows.length; i++) {
			for (let j = 0; j < table.rows[i].cells.length; j++) {
				this.rows[i].cells[j].className = ''
			}
		}
	}
}

鼠标进入离开显示添加行列

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
   /**
    * offset值好像是按照鼠标离每个td的位置不是离tr的位置
    * 所以需要利用client来处理下距离的判断
   */
   this.table.onmouseleave = function () {
	setTimeout(() => {
		addCellBtn.style.display = 'none'
		addRowBtn.style.display = 'none'
	}, 3000);

}
this.table.onmousemove = function () {
	if (event.clientX - this.offsetLeft >= 8 && event.clientX - this.offsetLeft <= 20) {
		this.style.cursor = "url('img/right.png') , auto"
		this.colspan = this.rows.length
	} else if (event.clientY - this.offsetTop >= 52 && event.clientY - this.offsetTop <= 60) {
		this.style.cursor = "url('img/down.png') , auto"
	} else {
		this.style.cursor = 'auto'
	}
}

鼠标点击选中一行一列事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

  /**
   * 判断鼠标的指针状态然后执行点击事件 选中一行/列
  */
   this.table.onclick = function (e) {
		if (this.style.cursor !== 'auto') {
			if (this.style.cursor.includes('down')) {
				for (let i = 0; i < this.rows.length; i++) {
					this.rows[i].cells[e.target.cellIndex].className = 'ui-selected'
				}
				this.rowspan = this.rows.length
			} else {
				for (let i = 0; i < this.rows[e.target.parentNode.rowIndex].cells.length; i++) {
					this.rows[e.target.parentNode.rowIndex].cells[i].className = 'ui-selected'
				}
				this.colspan = this.rows[e.target.parentNode.rowIndex].cells.length
				this.rowspan = 1
			}
		}
	}
	return this;
}

JavaScript封装成类的完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
(function (win) {
	var win_ = win;
	var kclass = function (tableId) {
		this._init.call(this, arguments);
	}
	kclass.fn = {

		tableId: "table",
		table: null,
		delTable: function () {
			this.table.remove()
		},
		addCell: function () {
			for (let i = 0; i < table.rows.length; i++) {
				var newCell = table.rows[i].insertCell(this.table.colspan)
				newCell.innerHTML = 'new add'
				for (let j = 0; j < table.rows[i].cells.length; j++) {
					this.table.rows[i].cells[j].style.width = 900 / this.table.rows[0].cells.length + 1 + 'px'
				}
			}
		},
		addRow: function () {
			var newRow = this.table.insertRow(this.table.rowspan)
			newRow.innerHTML = this.table.rows[0].innerHTML //document.getSelection().getRangeAt(0).startContainer.parentNode.innerHTML
		},
		mergeTable: function () {
			var $t = $("#" + this.tableId);
			if ($("table", $t).length > 0) {
				alert("不支持嵌套表格！");
				return;
			}

			var sigDel = "sign4delete"; // 删除标记，用作类名
			var sigSel = "ui-selected"; // 选中标记，用作类名

			// 补充单元格以便后继正确计算坐标
			$("th,td", $t).each(function () {
				// 坐标要实时计算，因会实时补充
				var ridx = $("tr", $t).index($(this).parent("tr"));
				var cidx = $(this).parent().children("th,td").index(this);

				var rowspan = Number($(this).attr("rowspan")) || 1;
				var colspan = Number($(this).attr("colspan")) || 1;
				var isSel = $(this).hasClass(sigSel);
				// 非选单元格拆出的单元格要加删除标记
				if (rowspan <= 1 && colspan <= 1)
					return;
				// 跨格开插
				$("tr", $t).each(function () {
					var idx = $("tr", $t).index(this);
					var arr, $td = $("<td>").addClass(isSel ? sigSel : sigDel);

					if (idx == ridx) {
						// 本行在 [cidx] 后插入 colspan-1 个

						arr = $(); // 准备待插单元格
						for (var i = 0; i < colspan - 1; i++)
							arr = arr.add($td.clone());
						// 插入
						$("th,td", this).eq(cidx).after(arr);

					} else if (ridx < idx && idx < ridx + rowspan) {
						// 以下行在 [cidx] 前插入 colspan 个

						arr = $(); // 准备待插单元格
						for (var i = 0; i < colspan; i++)
							arr = arr.add($td.clone());
						// 插入
						if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
							$("th,td", this).eq(cidx - 1).after(arr);
						else if ($("th,td", this).eq(cidx).length > 0)
							$("th,td", this).eq(cidx).before(arr);
						else
							$(this).prepend(arr);
					}
				});
			});

			var rmin = 10000,
				cmin = 10000;
			var rmax = 0,
				cmax = 0;
			var rnum, cnum;
			// 计算起始和跨距
			$("th,td", $t).filter("." + sigSel).each(function () {
				var ridx = $("tr", $t).index($(this).parent("tr"));
				rmin = ridx < rmin ? ridx : rmin;
				rmax = ridx > rmax ? ridx : rmax;
				var cidx = $(this).parent().children("th,td").index(this);
				cmin = cidx < cmin ? cidx : cmin;
				cmax = cidx > cmax ? cidx : cmax;
			});
			rnum = rmax - rmin + 1;
			cnum = cmax - cmin + 1;

			// 合并单元格
			$("th,td", $t).each(function () {
				var ridx = $("tr", $t).index($(this).parent("tr"));
				var cidx = $(this).parent().children("th,td").index(this);
				// 标记单元格待删
				if (rmin <= ridx && ridx <= rmax &&
					cmin <= cidx && cidx <= cmax)
					$(this).addClass(sigDel);
				// 处理被选左上角单元格
				if (ridx == rmin && cidx == cmin)
					$(this).removeClass(sigDel).attr({
						rowspan: rnum,
						colspan: cnum
					});
				// 清理残余
				if ($(this).attr("rowspan") == 1) $(this).removeAttr("rowspan");
				if ($(this).attr("colspan") == 1) $(this).removeAttr("colspan");
			}).remove("." + sigDel);
		},
		/*
		mergeTable: function () {
			var nodes = this.table.getElementsByClassName('ui-selected')
			var newNode = document.createElement('td')
			var parent = nodes[0].parentNode
			newNode.rowSpan = this.table.rowspan
			newNode.colSpan = this.table.colspan
			parent.replaceChild(newNode, nodes[0])
			while (nodes[0]) {
				nodes[0].remove()
			}
		},*/
		mergeDown: function () {
			var row = document.getSelection().anchorNode.parentNode.rowIndex
			var cell = document.getSelection().anchorNode.cellIndex
			var node = document.getSelection().anchorNode
			if (row != this.table.rows.length - 1 && node.rowSpan == 1) {
				node.rowSpan = 2
				this.table.rows[row + 1].cells[cell].remove()
			}
		},
		mergeRight: function () {
			var cell = document.getSelection().anchorNode.cellIndex
			var node = document.getSelection().anchorNode
			if (cell != 0 && node.colSpan == 1) {
				node.previousElementSibling.remove()
				node.colSpan = 2
			}
		},
		splitTable: function () {
			var $t = $("#" + this.tableId);

			if ($("table", $t).length > 0) {
				alert("不支持嵌套表格！");
				return;
			}

			var sigDel = "sign4delete"; // 删除标记，类名，自定义
			var sigSel = "ui-selected"; // 选中标记，类名，jQuery UI 定义

			// 补充单元格以便后继正确计算坐标
			$("th,td", $t).each(function () {
				// 坐标要实时计算，因会实时补充
				var ridx = $("tr", $t).index($(this).parent("tr"));
				var cidx = $(this).parent().children("th,td").index(this);
				var rowspan = Number($(this).attr("rowspan")) || 1;
				var colspan = Number($(this).attr("colspan")) || 1;
				var isSel = $(this).hasClass(sigSel);
				// 非选单元格拆出的单元格要加删除标记

				if (rowspan <= 1 && colspan <= 1)
					return;

				if (isSel)
					$(this).removeAttr("colspan").removeAttr("rowspan");

				// 跨格开插
				$("tr", $t).each(function () {
					var idx = $("tr", $t).index(this);
					var arr, $td = $("<td>");

					if (!isSel)
						$td.addClass(sigDel);

					if (idx == ridx) {
						// 本行在 [cidx] 后插入 colspan-1 个

						arr = $(); // 准备待插单元格
						for (var i = 0; i < colspan - 1; i++)
							arr = arr.add($td.clone());

						$("th,td", this).eq(cidx).after(arr);

					} else if (ridx < idx && idx < ridx + rowspan) {
						// 以下行在 [cidx] 前插入 colspan 个

						arr = $(); // 准备待插单元格
						for (var i = 0; i < colspan; i++)
							arr = arr.add($td.clone());

						if (cidx > 0 && $("th,td", this).eq(cidx - 1).length > 0)
							$("th,td", this).eq(cidx - 1).after(arr);
						else if ($("th,td", this).eq(cidx).length > 0)
							$("th,td", this).eq(cidx).before(arr);
						else
							$(this).prepend(arr);
					}
				});
			});

			// 重新获取以取到删者并删之
			$("th,td", $t).remove("." + sigDel);
		},
		/*
		splitTable: function () {
			var node = document.getSelection().anchorNode
			var td = document.createElement('td')
			if (node.rowSpan == 2 && node.colSpan == 1) {
				node.rowSpan = 1
				node.parentNode.nextElementSibling.appendChild(td)
			} else if (node.colSpan == 2 && node.rowSpan == 1) {
				node.colSpan = 1
				node.parentNode.appendChild(td)
			}
		},*/
		addEvent: function () {
			document.body.onmouseup = function () {}
		},
		_init: function () {
			var tableId = arguments[0][0];
			if (!tableId)
				throw new Error("table id cannot be null");
			var table = document.getElementById(tableId);
			if (!table || table.nodeName.toUpperCase() != 'TABLE') {
				throw new Error("canot find the table,please enter the right id");
			}
			// 侧边和底部的新增按钮
			var addCellBtn = document.getElementById('addCell')
			var addRowBtn = document.getElementById('addRow')
			this.tableId = tableId;
			this.table = table;

			//使表格可选
			this.table.onmousedown = function (e) {
				// 鼠标按下的时候获取所在单元格的坐标，和鼠标按下的时间
				this.startRow = e.target.parentNode.rowIndex
				this.startCell = e.target.cellIndex
				this.startDate = new Date()
			}
			this.table.onmouseup = function () {
				// 通过和鼠标抬起事件所获取的时间进行对比 判断是否是长按鼠标事件
				var isClick = new Date() - this.startDate < 500 ? true : false;

				// 获取鼠标抬起时 鼠标所在单元格的坐标点
				var endCell = event.target.cellIndex
				var endRow = event.target.parentNode.rowIndex

				if (!isClick) {
					for (let i = Math.min(endRow, this.startRow); i <= Math.max(endRow, this.startRow); i++) {
						for (let j = Math.min(endCell, this.startCell); j <= Math.max(endCell, this.startCell); j++) {
							// 以获取对角坐标 填充选中的区域
							//this.rows[i].cells[j].className = 'ui-selected'

							if (this.rows[i].cells[j]) {
								if (this.rows[i].cells[j].rowSpan > 1) {
									if (j == Math.max(endCell, this.startCell)) {
										for (let a = 1; a < this.rows[i].cells[j].rowSpan; a++) {
											if(this.rows[i + a].cells[j]){
												this.rows[i + a].cells[j].className = 'del'
											}
										}
									}else if((j + table.rows[i].cells[j].colSpan - 1 )== Math.max(endCell, this.startCell)){
										for (let a = 1; a < this.rows[i].cells[j].rowSpan; a++) {
											for (let b = 0; b < this.rows[i].cells[j].colSpan; b++) {
												if (this.rows[i + a].cells[j+b]) {
													this.rows[i + a].cells[j+b].className = 'del'
												}
											}
										}
									} else {
										 var maxJ = Math.max(endCell, this.startCell)
										for (let a = 0; a < this.rows[i].cells[j].rowSpan; a++) {
											if (table.rows[i + a].cells[maxJ]) {
												this.rows[i + a].cells[maxJ].className = 'del'
											}
										} 

									}
								}

								if (this.rows[i].cells[j].colSpan > 1) {
									if (j !== endCell && j !== this.startCell) {
										for (let b = 1; b < this.rows[i].cells[j].colSpan; b++) {
											if(this.rows[i].cells[j + b]){
												this.rows[i].cells[j + b].className = 'del'
											}			
										}
									}else if((j + table.rows[i].cells[j].colSpan - 1 )== Math.max(endCell, this.startCell)){
										for (let a = 0; a < this.rows[i].cells[j].rowSpan; a++) {
											for (let b = 1; b < this.rows[i].cells[j].colSpan; b++) {
												if (this.rows[i + a].cells[j+b]) {
													this.rows[i + a].cells[j+b].className = 'del'
												}
											}
										}	
									} 
									else {
										this.rows[i].cells[j].className = ''
									}
								}
								this.rows[i].cells[j].className += 'ui-selected'
							}
						}
					}
					// 在table中增加两个属性 获取到跨的行和列 供合并单元格
					this.rowspan = Math.abs(endRow - this.startRow) + 1
					this.colspan = Math.abs(endCell - this.startCell) + 1

				} else {
					// 清空样式
					this.rowspan = endRow
					this.colspan = endCell
					for (let i = 0; i < table.rows.length; i++) {
						for (let j = 0; j < table.rows[i].cells.length; j++) {
							this.rows[i].cells[j].className = ''
						}
					}
				}
			}

			this.table.onmouseenter = function () {
				addCellBtn.style.display = 'inline-block'
				addRowBtn.style.display = 'block'
			}
			this.table.onmouseleave = function () {
				setTimeout(() => {
					addCellBtn.style.display = 'none'
					addRowBtn.style.display = 'none'
				}, 3000);

			}
			this.table.onmousemove = function () {
				if (event.clientX - this.offsetLeft >= 8 && event.clientX - this.offsetLeft <= 20) {
					this.style.cursor = "url('img/right.png') , auto"
					this.colspan = this.rows.length
				} else if (event.clientY - this.offsetTop >= 52 && event.clientY - this.offsetTop <= 60) {
					this.style.cursor = "url('img/down.png') , auto"
				} else {
					this.style.cursor = 'auto'
				}
			}
			this.table.onclick = function (e) {
				if (this.style.cursor !== 'auto') {
					if (this.style.cursor.includes('down')) {
						for (let i = 0; i < this.rows.length; i++) {
							this.rows[i].cells[e.target.cellIndex].className = 'ui-selected'
						}
						this.rowspan = this.rows.length
					} else {
						for (let i = 0; i < this.rows[e.target.parentNode.rowIndex].cells.length; i++) {
							this.rows[e.target.parentNode.rowIndex].cells[i].className = 'ui-selected'
						}
						this.colspan = this.rows[e.target.parentNode.rowIndex].cells.length
						this.rowspan = 1
					}
				}
			}
			return this;
		}
	}
	kclass.prototype = kclass.fn;
	win_.ytable = (win_.ytable || kclass);
})(window);

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2019-2023 John Doe
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信