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

17.02.2016 15:40

"colspan"? не, не слышал.

Ребят, что то вообще бред какой-то творится. Динамическая созданная таблица, делаю им colspan, на последних строках, ломается к чертям почему-то. Гляньте, пожалуйста, а то уже глаза стёр.

for (i=0; i<4; i++){
				var newRow1 = document.createElement("tr");
				var newRow2 = document.createElement("tr");
				var newRow3 = document.createElement("tr");
				var newRow4 = document.createElement("tr");
				var newCell1 = document.createElement("td");
				newCell1.classList.add('td1');
				var newCell2 = document.createElement("td");
				var newCell3 = document.createElement("td");
				var newCell4 = document.createElement("td");
				var newCell5 = document.createElement("td");
				newCell5.classList.add('td2');
				var newCell6 = document.createElement("td");
				newCell6.classList.add('td2');
				var newCell7 = document.createElement("td");
				var newCell8 = document.createElement("td");
				var newCell9 = document.createElement("td");
				var newCell10 = document.createElement("td");
				var newCell11 = document.createElement("td");
				var newCell12 = document.createElement("td");
				newCell12.classList.add('td1');
				var newCell13 = document.createElement("td");
				var newCell14 = document.createElement("td");
				var newCell15 = document.createElement("td");
				var newCell16 = document.createElement("td");
				newCell16.classList.add('td2');
				var newCell17 = document.createElement("td");
				newCell17.classList.add('td2');
				var newCell18 = document.createElement("td");
				var newCell19 = document.createElement("td");
				var newCell20 = document.createElement("td");
				var newCell21 = document.createElement("td");
				var newCell22 = document.createElement("td");
				var newCell23 = document.createElement("td");
				newCell23.classList.add('td2');
				var newCell24 = document.createElement("td");
				newCell24.classList.add('td2');
				var newCell25 = document.createElement("td");
				var newCell26 = document.createElement("td");
				var newCell27 = document.createElement("td");
				var newCell28 = document.createElement("td");
				var newCell29 = document.createElement("td");
				var newCell30 = document.createElement("td");
				newCell30.classList.add('td2');
				var newCell31 = document.createElement("td");
				var newCell32 = document.createElement("td");
				var newCell33 = document.createElement("td");
				var newCell34 = document.createElement("td");
				newCell34.classList.add('td2');
				var newCell35 = document.createElement("td");
				newCell35.classList.add('td2');
				var newCell36 = document.createElement("td");
				var newCell37 = document.createElement("td");
				var newCell38 = document.createElement("td");
				var newCell39 = document.createElement("td");
				var newCell40 = document.createElement("td");
				var newCell41 = document.createElement("td");
				newCell41.classList.add('td2');
				var newCell42 = document.createElement("td");
				var newCell43 = document.createElement("td");
				var newCell44 = document.createElement("td");
				newRow1.appendChild(newCell1);
				newRow1.appendChild(newCell2);
				newRow1.appendChild(newCell3);
				newRow1.appendChild(newCell4);
				newRow1.appendChild(newCell5);
				newRow1.appendChild(newCell6);
				newRow1.appendChild(newCell7);
				newRow1.appendChild(newCell8);
				newRow1.appendChild(newCell9);
				newRow1.appendChild(newCell10);
				newRow1.appendChild(newCell11);
				newRow2.appendChild(newCell12);
				newRow2.appendChild(newCell13);
				newRow2.appendChild(newCell14);
				newRow2.appendChild(newCell15);
				newRow2.appendChild(newCell16);
				newRow2.appendChild(newCell17);
				newRow2.appendChild(newCell18);
				newRow2.appendChild(newCell19);
				newRow2.appendChild(newCell20);
				newRow2.appendChild(newCell21);
				newRow2.appendChild(newCell22);
				newRow3.appendChild(newCell23);
				newRow3.appendChild(newCell24);
				newRow3.appendChild(newCell25);
				newRow3.appendChild(newCell26);
				newRow3.appendChild(newCell27);
				newRow3.appendChild(newCell28);
				newRow3.appendChild(newCell29);
				newRow3.appendChild(newCell30);
				newRow3.appendChild(newCell31);
				newRow3.appendChild(newCell32);
				newRow3.appendChild(newCell33);
				newRow4.appendChild(newCell34);
				newRow4.appendChild(newCell35);
				newRow4.appendChild(newCell36);
				newRow4.appendChild(newCell37);
				newRow4.appendChild(newCell38);
				newRow4.appendChild(newCell39);
				newRow4.appendChild(newCell40);
				newRow4.appendChild(newCell41);
				newRow4.appendChild(newCell42);
				newRow4.appendChild(newCell43);
				newRow4.appendChild(newCell44);
				tab[0].appendChild(newRow1);
				tab[0].appendChild(newRow2);
				tab[0].appendChild(newRow3);
				tab[0].appendChild(newRow4);
}
$('.td1').each(function(){
					$(this).attr('colspan', '4');
				});
				$('.td2').each(function(){
					$(this).attr('colspan', '2');
				});

Захожу в файрбаг, с начала все хорошо, на последней строке ломается почему то. Если надо будет могу скирны выложить, как разъезжается.
fireBug показывает, что colspan установился, но я то вижу же, что нетю

laimas

17.02.2016 15:52

А не удобнее ли описать создание ячеек циклом?

AciDWarrioR

17.02.2016 15:53

laimas,
Ну они как бы в цикле и создаются.

Цитата:

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

for (i=0; i<4; i++){

Просто по сути одна запись с БД должна будет занять 4 строки. И по идеи в этом цикле они и заполняются, но я этого не скидывал, а скинул просто каркас, что он не собирается.

laimas

17.02.2016 15:58

Да нет, я имею ввиду методичное их перечисление, вставка...

AciDWarrioR

17.02.2016 16:01

laimas,
Да можно, но суть вопроса не в этом...

рони	17.02.2016 16:59

AciDWarrioR,
сделай таблицу до и после

AciDWarrioR

17.02.2016 16:59

Цитата:

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

сделай таблицу до и после

Скрины?

laimas

17.02.2016 17:07

Цитата:

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

Да можно, но суть вопроса не в этом...

Все в одном. Ну зачем зная ячейку делать так newCell35.classList.add('td2');, чтобы потом, да еще с привлечением JQ устанавливать colspan?

AciDWarrioR

17.02.2016 17:08

До

Как должно быть, не считая последней линии:
[

Итог:

AciDWarrioR

17.02.2016 17:11

laimas,
Друг, вот, честно, это проблемы не решит. Я переделаю это. Сейчас я просто делал заготовку и хотел посмотреть как это грамотно colspan разбить.
Вот твой ответ, он знаешь как выглядит, я тебе кричу, что у меня дома пожар, а ты мне зачем я дом возле леса строил...

рони	17.02.2016 18:26

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

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>

laimas

17.02.2016 18:56

Цитата:

Сообщение от 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>

AciDWarrioR

18.02.2016 08:39

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

Цитата:

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

k = c * r, n;

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

рони	18.02.2016 09:19

AciDWarrioR,

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

рони	18.02.2016 09:24

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>

AciDWarrioR

18.02.2016 09:29

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

AciDWarrioR

18.02.2016 09:50

Цитата:

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

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

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

рони	18.02.2016 10:02

Цитата:

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

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

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

AciDWarrioR

18.02.2016 10:45

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

laimas

18.02.2016 11:53

Цитата:

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

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

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

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

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

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

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

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

Цитата:

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

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

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

AciDWarrioR

18.02.2016 12:04

Цитата:

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

Теперь понятно для чего?

:( :blink::no:
Я понял, что для строк, но почему именно три, это для меня загадка.
Я для строк ввел переменную count = 0, в зависимости чему она равна (0, 1, 2, 3), Выполняется свои изменения для строки, если count = 4, обнулить. Так как одна запись из БД занимает 4 строки. Вот как то так.

рони	18.02.2016 12:17

AciDWarrioR,

Цитата:

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

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

перевод - в каждой 4 строке или следующей после 4 при условии что в строке вставлены уже все ячейки числом 11 ... сделать нужным ячейкам colSpan и удалить лишние ячейки
тоже самое без &

if((!(n % 4) || !( (n-1) % 4)) && R.cells.length == c) {
          R.cells[0].colSpan = 2;
          R.cells[4].colSpan = 2;
          R.deleteCell(-1);
          R.deleteCell(-1);
       }

laimas

18.02.2016 12:36

!( (n-1) % 4)) - а какая хрен разница?

рони	18.02.2016 12:55

Цитата:

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

а какая хрен разница?

интересны разные варианты

AciDWarrioR

18.02.2016 13:01

При условии, что строки не идентичны вот такой вариант:

if(R.cells.length == cell) {
if (count == 4){
....
count = 0;
}
if(count == 0){
count++;
....
}
} else if(count == 1){
count++;
....
}
и т.д.

laimas

18.02.2016 16:13

Цитата:

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

интересны разные варианты

Так разве кто спорит :)

laimas

18.02.2016 16:28

Цитата:

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

При условии, что строки не идентичны вот такой вариант

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

Желательно наоборот как можно меньше всего этого и проверок тоже. Например, выражение:

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

более разумнее, чем:

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

хотя "от перемены мест слагаемых сумма их не изменяется". :)

PS. Объединять ячейки (по условию) нужно в каждой пятой и следующей за ней строке. Каждую пятую определяет n % 4, а следующую за ней (n-1) % 4 или (n & 3) == 1.

laimas

18.02.2016 17:02

Цитата:

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

Так как одна запись из БД занимает 4 строки. Вот как то так.

Вот это уже перл, если только не своеобразное мышление. ) В базе не может быть записей, которые занимают N строк html-таблицы. В базе может быть N идентичных значений, которые можно вывести единожды, объединив ячейки колонки таблицы. Именно так, так как объединить можно только ячейки, строки таблицы объединить нельзя. А N идентичных записей, которые нужно поместить, в одной строке таблицы.... даже трудно и представить записи в SQL таблице "в ширину". Здесь скорее речь о родителях -> потомках идет?

И, если таблицу строить на сервере, то это меньше крови будет.

AciDWarrioR

18.02.2016 17:16

Цитата:

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

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

более разумнее, чем:

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

Тут ты меня режешь без ножа. Не дошел я до этого ещё. И вот читаю, как будто первоклассник квантовую механику.

Цитата:

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

Так как одна запись из БД занимает 4 строки. Вот как то так.

В общем, объясню на пальцах, тем более уже выглядит все нормально.
В БД запись про один снимок составляет 34 колонки. Для пользователя выводится около 12+4 выпадающие строки из них. Уместить в одну строку html таблицы, не айсно. Поэтому было решено, разбить экран на две колонки: таблица и карта. Поэтому я разбивал запись на 4 строки таблицы. Вот погляди как это выглядит сейчас)

Теперь вот буду делать ограничение на вывод количества снимков и листалку без перезагрузки страницы, как галерея в общем.:victory:

laimas

18.02.2016 17:53

Цитата:

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

читаю, как будто первоклассник квантовую механику

А с этим то какие проблемы, это ведь вытекает из условия. Так проще будет, дано условие - проверять почтовый ящик по понедельникам и вторникам, и если в нем будет пять писем, то написать ответы. Что разумнее:

1) проверять количество писем только в понедельник и вторник?
2) проверять письма каждый день недели и только потом узнать какой день недели, чтобы принять решение нужно ли отвечать?

А раз в случае ячеек таблицы иное условие?

На фото объединение ячеек в колонке (первой), а это несколько иное нежели colspan. А ячейки по размерам файлов так вообще нечто непонятное. )

AciDWarrioR

18.02.2016 18:26

Цитата:

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

На фото объединение ячеек в колонке (первой), а это несколько иное нежели colspan. А ячейки по размерам файлов так вообще нечто непонятное. )

Ну там объединение rowspan)
А про размер не говорите..стыдно:lol:
Строго то не судите, веб разработкой никогда не занимался. На работу устроился, а тут сразу такое)
Насчет алгоритма вы правы, но как задавать условие этим & не понимаю))) Как-нибудь почитаю)
Но все же напоследок, огромное спасибо laimas и
рони. Благодаря вам и ещё destus и delitant_pro полюбил этот форум и пытаюсь стать активном участником):)

Часовой пояс GMT +3, время: 13:00.