[MC-XOBAHCK]

Здравствуйте!
Расширяю функционал редактора, чтоб в модальном окне удобно заполнять таблицы.
Основное получилось быстро написать, а вот на целый день застрял с объединением ячеек таблицы.

Не знаю как выделять ячейки таблицы, чтоб мышкой с нажатой левой клавишей можно было выделять ячейки, а потом нажав кнопку "Объединить ячейки" они объединились.

Накидал вот такое, знаю что не правильно. У меня пока нет идей как это сделать. Не могу выделить ячейки, чтоб дойти до того какой атрибут ставить colspan или rowspan.

<style>td.cell__active {background:#7fffd4}table, th, td{min-width:50px;border:solid 1px #ccc} th, td{min-width:50px;min-height:15px}button{margin-top:10px}</style>


<table contenteditable="true">
	<tbody>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
	</tbody>
</table>

<button id="margeTd">Объединить ячейки</button>


<script>
  let table = document.querySelector('table');

  // Добавить класс ячейкам таблицы
  table.addEventListener('mouseover', function(e) {
      if (e.target.tagName == 'TD') {
          e.target.className = 'cell__active';
      }
  });

  // Объединение ячеек таблицы
  document.querySelector('#margeTd').addEventListener('click', function () {
      let marg = table.querySelectorAll('td.cell__active');

      if (marg.length > 1) {
          for (let i = 0; i < marg.length; i++) {
              i == 0 ? marg[i].setAttribute('colspan', marg.length, 0) : marg[i].remove();
          }
      }
  });
</script>

Может кто накинет идею, как мне выделить ячейки. Тестово поставил - мышкой поводить добавляет класс и по классу объединяет. Но это неправильно.