Выделить ячейки таблицы и объединить (как в Excel)?

Question

Есть некая форма с добавлением полей и строк. Пользователь вводит название и в блоке появляется tr и в ней td. Так же я хотел сделать объединение прямо в начале, но мои знания не позволили это сделать корректно . При первом выборе colspan и rowspan вроде бы все нормально, но при последющем выборе colspan и rowspan они меняются везде. Я понимаю что я это сделал в цикле перебора двумерного массива, но не знаю как это сделать по-другому.

$('.burger button').click(function(e) {
  $(this).toggleClass('bg-active');
})

let chess = [];

$('#pole').click(function() {
  var valPole = $(this).parent().find('#valPole').val();
  if (valPole == '') {
    valPole = "&nbsp;";
  };
  chess.push([valPole]);
  draw();

  var col_pole = $(this).parent().find("#col_pole").val();
  var row_pole = $(this).parent().find("#row_pole").val();

  if (col_pole == '') {
    col_pole = 1;
  }
  if (row_pole == '') {
    row_pole = 1;
  }
  console.log(row_pole, col_pole);

});

$('#stroka').click(function() {
  let s = parseInt($('.block').find('.col_row:last-child').attr("id").slice(4));
  console.log(s);
  chess[s].push($(this).parent().find('#valStroka').val());
  draw();


  var col_stroka = $(this).parent().find("#col_stroka").val();
  var row_stroka = $(this).parent().find("#row_stroka").val();

  if (col_stroka == '') {
    col_stroka = 1;
  }

  if (row_stroka == '') {
    row_stroka = 1;
  }
  console.log(row_stroka, col_stroka);
});





function draw() {
  $(".block").find('table').append().html('');
  let out = '';
  let inn = '';
  let m = 0;
  for (let i = 0; i < chess.length; i++) {
    let arr = chess[i].length;
    $('.block').find('table').append($(`<tr class="col_row" colspan="${col_pole.value}" rowspan="${row_pole.value}" id=row_${i}></tr>`));
    for (let k = 0; k < arr; k++) {
      if (chess[i][k] !== 0) {
        $(`#row_${i}`).append($(`<td class="tabel" colspan="${col_stroka.value}" rowspan="${row_stroka.value}">${chess[i][k]}</td>`));
      } else {
        $(`#row_${i}`).append($('<td class="tabel-none"></td>'));
      }

    }
  }

}
draw();

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #262626;
}

.block_button_pole,
.block_button_stroka {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.block_button_pole input,
.block_button_stroka input {
  height: 60px;
}

.block_input {
  display: flex;
  flex-direction: column;
}

.burger {
  position: absolute;
  top: 0;
  right: 0;
}

.burger button {
  border-radius: 50%;
  background-color: #fff;
}

button {
  cursor: pointer;
  border: none;
}

.burger span,
.burger span::before,
.burger span::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -20px;
  background-color: #262626;
  width: 40px;
  height: 2px;
  transition: all .5s ease;
}

.burger span::before,
.burger span::after {
  content: "";
  display: block;
  transition: .5s;
}

.burger span::before {
  transform: translateY(-5px);
}

.burger span::after {
  transform: translateY(5px);
}

.bg-active span::before {
  transform: rotate(-35deg);
  width: 20px;
  transform-origin: left bottom;
}

.bg-active span::after {
  transform: rotate(35deg);
  width: 20px;
  transform-origin: left top;
}

.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block {
  width: 542px;
  height: 300px;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  margin-top: 50px;
}

.tabel-none {
  border: 1px dashed transparent;
}

.tabel-none {
  border: 1px dashed transparent;
}

.tabel {
  padding: 5px 10px;
  border: 1px dashed yellow;
}

.tb {
  top: 60px;
  min-width: 90px;
  height: 20px;
  border: 1px dashed yellow;
}

button {
  width: 60px;
  height: 60px;
  background-color: red;
  color: white;
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="block_button_pole">
    <div class="block_input">
      <label for="col">Объеденить строки</label>
      <input type="number" name="" id="col_pole" min="1" value="1">
    </div>
    <div class="block_input">
      <label for="col">Объеденить ячейки</label>
      <input type="number" name="" id="row_pole" min="1" value="1">
    </div>
    <div class="block_input name">
      <label for="valPole">Название</label>
      <input type="text" name="" id="valPole">
    </div>
    <button id="pole">Поле</button>
  </div>
  <div class="block_button_stroka">
    <div class="block_input">
      <label for="col">Объеденить строки</label>
      <input type="number" name="" id="col_stroka" min="1" value="1">
    </div>
    <div class="block_input">
      <label for="col">Объеденить ячейки</label>
      <input type="number" name="" id="row_stroka" min="1" value="1">
    </div>
    <div class="block_input name">
      <label for="valPole">Название</label>
      <input type="text" name="" id="valStroka">
    </div>
    <button id="stroka">Строка</button>
  </div>


  <div class="burger bg-line">
    <button><span></span></button>
  </div>
  <div class="wrapper">
    <div class="block">
      <table cellspacing="0" border="1">

      </table>
    </div>
  </div>
</body>
<script src="main.js"></script>

</html>

Код на JSFiddle

БЛОГ НА HUSL

Выделить ячейки таблицы и объединить (как в Excel)?

Ответы (0 шт):