Javascript-форум - "colspan"? не, не слышал.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - "colspan"? не, не слышал. (https://javascript.ru/forum/misc/61418-colspan-ne-ne-slyshal.html)

обьединение ячеек таблицы

AciDWarrioR, запустить код, подождать 3 секунды, долго думать.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     td{
  width: 50px;
  border: 1px solid #000000;
  text-align: center;
  height: 50px;
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
 $(function() {
    var mytable = $("<table/>");
    $.each(Array(10), function(i, myData) {
        $(mytable).append($("<tr/>").append($.map(Array(10), function(a, num) {
            return $("<td/>", {
                text: num
            })
        })))
    });
    $("body").append(mytable);

    function fn(data, table) {
        var del = [];
        Object.keys(data).forEach(function(key) {
            var tr = $("tr", table).eq(key);
            Object.keys(data[key]).forEach(function(i) {
                var td = $("td", tr).eq(i);
                var len = data[key][i];
                td[0].colSpan = len;
                var temp = td.next();
                for (var k = 1; k < len; k++) {
                    temp.length && del.push(temp);
                    temp = temp.next()
                }
            })
        });
        $.each(del, function(i, td) {
            td.remove()
        })
    }
    var data = {
        0: {
            0: 2,
            5: 2
        },
        1: {
            0: 2,
            5: 2
        }
    };
    window.setTimeout(function() {
        fn(data, mytable)
    }, 3E3)
});
  </script>
</head>

<body>

</body>

</html>

Цитата:

Сообщение от AciDWarrioR

это проблемы не решит.

Ну блин, если бы была сложная таблица, то есть объединение ячеек в колонках (не строках) было бы динамическое в зависимости от данных к примеру, ну тогда еще были бы трудности.

В данном же случае все "культурно идеально", что стоит прописать это в условиях? А добавлять строки и ячейки уж если JS, хватит методов insertRow() и insertCell(), и чтобы в одном цикле не писать портянки, а вставлять сразу ячейки, то число итераций должно быть Строк * Колонок. Что-то типа этого:

<html> 
<head> 
<style>
table {
    border-collapse: separate;
}
td {
    padding: 5px 10px;
    border: 1px solid #777;
}
</style> 
</head> 
<body>
<script> 
var c = 11, r = 16, T = document.createElement("table"), C, R;
document.body.appendChild(T);

for(var i = 0, k = c * r, n; i<k; i++) {

    if(!(i % c)) {
       n = i / c;
       R = T.insertRow(-1);
    }

    C = R.insertCell(-1);
    
    if((!(n % 4) || (n & 3) == 1) && R.cells.length == c) {
          R.cells[0].colSpan = 2;
          R.cells[4].colSpan = 2;
          R.deleteCell(-1);
          R.deleteCell(-1);
       }
}
</script>
</body> 
</html>

рони,
:-? Реально долго думать!!! Я что то пока вообще не вдупляю, что там происходит.
laimas,
Воооо, это уже разговор)))
Ну вот разбирая код:

Цитата:

Сообщение от laimas

k = c * r, n;

- как это понимать. Не встречал записи через запятую.
Всё догнал!) Сейчас разбирать буду)

AciDWarrioR,

var data = {
        0: { //индекс строки
            0: 2, //индекс ячейки с которой начать обьединение и количество ячеек для обьединения
            5: 2  //индекс ячейки с которой начать обьединение и количество ячеек для обьединения
        },
        1: {
            0: 2,
            5: 5
        }
    };
    window.setTimeout(function() {
        fn(data, mytable) //функция обьединения ячеек (обьект с данными для обьединения, таблица в которой необходимо это сделать)
    }, 3E3)

AciDWarrioR,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
        td{
  width: 50px;
  border: 1px solid #000000;
  text-align: center;
  height: 50px;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
   $(function(){
       function fn(data, table) {
        var del = [];
        Object.keys(data).forEach(function(key) {
            var tr = $("tr", table).eq(key);
            Object.keys(data[key]).forEach(function(i) {
                var td = $("td", tr).eq(i);
                var len = data[key][i];
                td[0].colSpan = len;
                var temp = td.next();
                for (var k = 1; k < len; k++) {
                    temp.length && del.push(temp);
                    temp = temp.next()
                }
            })
        });
        $.each(del, function(i, td) {
            td.remove()
        })
    }

        var data = {
        1: { //индекс строки
            0: 2 //индекс ячейки с которой начать обьединение и colSpan
        },
        2: {
            0: 3
                }
    };
    window.setTimeout(function() {
        fn(data, $('table')) //функция обьединения ячеек (обьект с данными для обьединения, таблица в которой необходимо это сделать)
    }, 3E3)
   })
  </script>
</head>

<body>
   <table>
   	<thead>
   		<tr>
   			<th>Title 1</th>
   			<th>Title 2</th>
   			<th>Title 3</th>
   		</tr>
   	</thead>
   	<tbody>
   		<tr>
   			<td>Cell 1.1</td>
   			<td>Cell 1.2</td>
   			<td>Cell 1.3</td>
   		</tr>
   		<tr>
   			<td>Cell 2.1</td>
   			<td>Cell 2.2</td>
   			<td>Cell 2.3</td>
   		</tr>
   	</tbody>
   </table>
</body>

</html>

рони,
Я вот пока пытаюсь laimas, пример сделать, мне с моим опытом он более понятен. Спасибо, что разъяснил, теперь понятно.
А такой вопрос: почему мой изначальный вариант то разваливался? Есть идеи?

Цитата:

Сообщение от laimas

if((!(n % 4) || (n & 3) == 1) && R.cells.length == c)

Вот с этим условием запара у меня. Зачем побитовое сравнение?

Цитата:

Сообщение от AciDWarrioR

А такой вопрос: почему мой изначальный вариант то разваливался? Есть идеи?

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

рони,
Тебе карму не могу добавить, хотя laimas добавилось. В общем сделал таблицу. Походу проблема была в том, что у меня ячейки были пустые. Сейчас делал по шаблону laimas и была та же проблема. Начал заполнять блоки и таблица выпрямилась.

Цитата:

Сообщение от AciDWarrioR

Воооо, это уже разговор

А до этого я о другом говорил?

Нужно построить таблицу с объединением ячеек в строке. Такое объединение легкое, в отличие от объединения ячеек в колонке, и изначально количество ячеек во всех строках равно. Можно построить так:

а) обходом двумя циклами - по количеству строк и количеству ячеек в каждой строке
б) обходом одним циклом с количеством итераций равных числу ячеек в таблице

Касаемо строки, то нужно только знать когда создавать новую, что вполне не сложно узнать, а следовательно двух циклов не нужно.

Долго строить таблицу в цикле, а затем ворошить ее опять чтобы объединить ячейки зачем? На этапе построения строки и ячейки уже под рукою, зачем же повторный обход.

Я думаю, что это естественно, глядя на "портянки" обязательно возникнет вопрос "почему"?

Цитата:

Сообщение от AciDWarrioR

Вот с этим условием запара у меня. Зачем побитовое сравнение?

В таблице 16 строк (индексы от 0 до 15). Написать все в столбик и, если трудно эти индексы "читать" в бинарном виде, можно преобразовать. После преобразования еще раз посмотреть на них. Здесь & 3 выбор по маске. Теперь понятно для чего?