Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.10.2018, 01:00
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 279

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

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

Накидал вот такое, знаю что не правильно. У меня пока нет идей как это сделать. Не могу выделить ячейки, чтоб дойти до того какой атрибут ставить 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>

Может кто накинет идею, как мне выделить ячейки. Тестово поставил - мышкой поводить добавляет класс и по классу объединяет. Но это неправильно.
Ответить с цитированием
  #2 (permalink)  
Старый 29.10.2018, 03:14
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,482

Сообщение от MC-XOBAHCK
выделять ячейки, а потом нажав кнопку "Объединить ячейки" они объединились
Проще выделить строку, хотя можно и несколько ячеек в строке так как посчитать будет не сложно, а вот со столбцами не так просто.
Ответить с цитированием
  #3 (permalink)  
Старый 29.10.2018, 04:12
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 279

Сообщение от laimas Посмотреть сообщение
Проще выделить строку, хотя можно и несколько ячеек в строке так как посчитать будет не сложно, а вот со столбцами не так просто.
В HTML можно объединять соседние ячейки. Точнее не объединять (объединять нельзя), а задавать размеры для отдельных ячеек при помощи атрибутов colspan или rowspan. Объединять можно уже при помощи js.

Проблема в том, что у меня нет идеи как выделять ячейки, при этом нужно выделять прямоугольной областью не вылазя за пределы tbody, thead, tfooter.

При объединении по горизонтали моё решение подходит, а вот в высоту пока только мысли проставить атрибуты с номерами строк или может по родителю ячеек как то можно.
Но я не могу выделить ячейки, поэтому в высоту пока не развиваю идею.
Ответить с цитированием
  #4 (permalink)  
Старый 29.10.2018, 05:58
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 9,482

Сообщение от MC-XOBAHCK
объединять нельзя
Можно.

Сообщение от MC-XOBAHCK
задавать размеры для отдельных ячеек при помощи атрибутов colspan или rowspan
Это как раз и есть указание, что данная ячейка равна N ячеек в строке или столбце, то есть в данной ячейке объединены N ячеек.

Откройте любое ПО, которое может создавать таблицы, объединять ячейки, тот же Word. Сохраните код как html и посмотрите структуру таблицы с объединенными ячейками, в особенности если в строке есть объединение в столбце. Это даст понимание того, что при объединении ячеек столбца не все так просто будет как с объединением в строке.
Ответить с цитированием
  #5 (permalink)  
Старый 29.10.2018, 09:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,841

выделятор блоков и обьединение ячеек
MC-XOBAHCK,
макет, обьединение ячеек(mergeTd) расчитано на первый клик!!!(требует доработки).
выделить ячейки и нажать кнопку
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   table{
           height: 250px;
           width: 250px;
           border-collapse: separate;
       }
   td{
      border: 1px #0000CD solid;
      background-color: #800080;
   }
   td.sel{
    opacity:.6;
  }

  #line{
    position:absolute;
    width:0px;
    height:0px;
    background:rgba(0,90,255,0.25);
    border:1px solid rgba(0,114,255,0.5);
    box-sizing:border-box;
  }
  </style>

    <script>
window.addEventListener("DOMContentLoaded", function() {
    var target = document.createElement("div"),
        x, y;
    target.id = "line";
    document.addEventListener("mousedown", function(e) {
        if (e.which > 1) return;
        x = e.pageX;
        y = e.pageY;
        document.body.appendChild(target);
        selectBlock();
        document.addEventListener("mousemove", move, false);
        return false
    }, false);

    function move(e) {
        e.preventDefault();
        target.style.width = Math.abs(e.pageX - x) + "px";
        target.style.height = Math.abs(e.pageY - y) + "px";
        target.style.left = (e.pageX < x ? e.pageX : x) + "px";
        target.style.top =
            (e.pageY < y ? e.pageY : y) + "px";
        selectBlock(true)
    }
    document.addEventListener("mouseup", function() {
        target.style.width = "0px";
        target.style.height = "0px";
        document.removeEventListener("mousemove", move);
        target.parentNode && document.body.removeChild(target)
    });

    function collisionDetection(x1, y1, w1, h1, x2, y2, w2, h2) {
        return x1 < x2 + w2 && y1 < y2 + h2 && x1 + w1 > x2 && y1 + h1 > y2
    }

    function coordinate(el) {
        var pos = el.getBoundingClientRect(),
            top = pos.top,
            left = pos.left,
            right = pos.right,
            bottom = pos.bottom,
            height = bottom - top,
            width = right - left;
        return [left,
            top, width, height
        ]
    }

    function selectBlock(add) {
        [].forEach.call(document.querySelectorAll("td"), function(el) {
            var data = coordinate(el).concat(coordinate(target)),
                modify = add && collisionDetection.apply(null, data) ? "add" : "remove";
            el.classList[modify]("sel")
        })
    }

    function mergeTd(event) {
        var tds = document.querySelectorAll("td.sel"),
            len = tds.length,
            colspan = 1,
            parent;
        if (len) {
            [].forEach.call(tds, function(el, i) {
                if (i) {
                    var elParent = el.parentNode;
                    parent == elParent && colspan++;
                    elParent.removeChild(el)
                } else parent = el.parentNode
            });
            tds[0].colSpan = colspan;
            tds[0].rowSpan = len / colspan
        }
    }
    document.querySelector(".merge").addEventListener("mousedown", mergeTd)
});
</script>
</head>

<body>
<table>
    <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>
<input name="" type="button" value="go" class="merge">


</body>
</html>

Последний раз редактировалось рони, 29.10.2018 в 09:20.
Ответить с цитированием
  #6 (permalink)  
Старый 29.10.2018, 18:03
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 279

рони, Спасибо вам!
Вижу выделение ячеек происходит так как нужно, и вижу баг, что вы указали как требует доработки.

Я с утра приболел, вот начинаю приходить в себя и разбирать код.
Я код понимаю, но не весь. Если можно - есть вопросы.

В строке 33 создаётся элемент - createElement. Это прямоугольник области выделения мышью?

37 строка if (e.which > 1) return; - я правильно понял - это условие останавливает выполнение функции если код клавиши > 1 ? То есть вместе с событием mousedown это и есть нажатая левая кнопка мыши.

Последний раз редактировалось MC-XOBAHCK, 29.10.2018 в 18:08.
Ответить с цитированием
  #7 (permalink)  
Старый 29.10.2018, 18:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,841

MC-XOBAHCK,
да и да
Ответить с цитированием
  #8 (permalink)  
Старый 29.10.2018, 18:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,841

MC-XOBAHCK,
Сообщение от ruslan_mart
рони, по правой кнопке мыши выделение тоже срабатывает и при отпускании не убирается. Нужно сделать дополнительную проверку event.which
https://javascript.ru/forum/misc/519...tml#post343149
Ответить с цитированием
  #9 (permalink)  
Старый 29.10.2018, 21:52
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 279

Сообщение от рони Посмотреть сообщение
да и да
Ещё раз большое вам СПАСИБИЩЕ! Я разобрался с вашим кодом.

Получается, что выделение ячеек вы реализовали, а нужно доработать последнюю функцию - вот эту:
function mergeTd(event) {
    var tds = document.querySelectorAll("td.sel"),
        len = tds.length,
        colspan = 1,
        parent;

    if (len) {
        [].forEach.call(tds, function (el, i) {
            if (i) {
                var elParent = el.parentNode;
                parent == elParent && colspan++;
                elParent.removeChild(el)
            } else parent = el.parentNode
        });
        tds[0].colSpan = colspan;
        tds[0].rowSpan = len / colspan
    }
}
document.querySelector("#margeTd").addEventListener("mousedown", mergeTd);


1. У функции принимающий параметр event можно убрать или лучше оставить? Я понимаю так, что он вообще не нужен и никакие события в функции не отслеживаются. Работа происходит только с массивом выделенных ячеек.

2. Последние две строчки функции
tds[0].colSpan = colspan;
tds[0].rowSpan = len / colspan

Это тоже самое что:
tds[0].setAttribute('colspan', colspan, 0);
tds[0].setAttribute('rowspan', len / colspan, 0);

?

3. Идея как считать высоту и ширину для объединённой ячейки у меня появилась. Буду пробовать. Нужно немного посидеть поисследовать. Думаю у меня должно получиться, основная логика всё таки уже написана.

4. А вот что мне сложно будет доработать, это сделать правильное выделение. Вот только что обнаружил возможность вот такого выделения ячеек:
<style>table, th, td{min-width:50px;min-height:100px;border:solid 1px #ccc} th, td{min-width:50px;min-height:15px}</style>

<table>
    <tr><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td rowspan="2" style="background:red"></td></tr>
    <tr><td></td><td style="background:red"></td></tr>
</table>

вот же блин...
Ответить с цитированием
  #10 (permalink)  
Старый 29.10.2018, 22:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,841

MC-XOBAHCK,
да
1.можно убрать
2.свойство и атрибут, в данном случае изменение свойства равно назначению атрибута, такое не всегда, например свойство value можно изменить, атрибут останется прежним. подробнее тут
https://learn.javascript.ru/attribut...nachenie-value

3. удачи!!!
4. не знаю, выбор за вами, смотря какой нужен результат.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамически обновленная таблица HTML работает неправильно mishapod AJAX и COMET 1 11.04.2018 02:50
Простой онлайн редактор HTML dima_riabets Элементы интерфейса 0 14.02.2015 03:25
Редактор HTML в режиме real-time Demath Сайт Javascript.ru 4 04.07.2012 16:09
редактор html или bb кодов на jquery gaserge Общие вопросы Javascript 15 28.08.2011 01:39
WYSIWYG редактор текста HTML страницы на javascript Дмитри Чижиков Ваши сайты и скрипты 4 14.09.2009 17:05