Javascript-форум - "Странное" поведение таблицы

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

- Firefox/Mozilla (https://javascript.ru/forum/css-html-firefox-mizilla/)

- - "Странное" поведение таблицы (https://javascript.ru/forum/css-html-firefox-mizilla/85320-strannoe-povedenie-tablicy.html)

"Странное" поведение таблицы

Здравствуй, JavaScript-мир!
Не получается завершить задуманное: случайные изображения выстраиваются в ряд, вместо того, чтобы отображаться в таблице 2×2.
Пожалуйста, помогите разобраться:

<!DOCTYPE html>
<html>
<head>
<style>        
        [data-id="girl"] {
            background-image:url(https://loremflickr.com/100/100/girl?random=1); 
            width: 100px;
            height: 100px;
            }
 
         [data-id="boy"] {
            background-image:url(https://loremflickr.com/100/100/boy?random=1); 
            width: 100px;
            height: 100px;
            }
 
         [data-id="cat"] {
            background-image:url(https://loremflickr.com/100/100/cat?random=1); 
            width: 100px;
            height: 100px;
            }
 
         [data-id="dog"] {
            background-image:url(https://loremflickr.com/100/100/dog?random=1); 
            width: 100px;
            height: 100px;
            }
 
         [data-id="car"] {
            background-image:url(https://loremflickr.com/100/100/car?random=1); 
            width: 100px;
            height: 100px;
            }
 
         [data-id="house"] {
            background-image:url(https://loremflickr.com/100/100/house?random=1); 
            width: 100px;
            height: 100px;
            }
    </style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</script>
<script type="text/javascript">
    $(window).load(function(){
    $("td.Image").hide();
    var divs = $("td.Image").get().sort(function(){ 
    return Math.round(Math.random())-0.5; 
    }).slice(0,4)
    $(divs).appendTo(divs[0].parentNode).show();
    });
</script>
</head>
<body>
 
<table align="center" cellspacing="0" cellpadding="0">
            <tr>
                <td class="Image" data-id="girl"></td>
                <td class="Image" data-id="boy"></td> 
                <td class="Image" data-id="cat"></td>                 
            </tr> 
            <tr>
                <td class="Image" data-id="dog"></td>
                <td class="Image" data-id="car"></td> 
                <td class="Image" data-id="house"></td>                 
            </tr>
        </table>
        
</body>
</html>

:help:

Ну так вы выстраиваете их после сортировки без учета того, что они были в разных строках (<tr>). Все лепите в одну строку.
К тому же вы берете из "отсортированного" массива только первые 4 элемента и их потом лепите в одну строку и только к ним применяете .show().

Voraa, видимо, так ... но пока самостоятельно исправить не получается :help:

Цитата:

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

лепите в одну строку

Леплю((( Учусь новому на старости лет...

<!DOCTYPE html>
<html>
<head>
<style>       
        [data-id="girl"] {
            background-image:url(https://loremflickr.com/100/100/girl?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="boy"] {
            background-image:url(https://loremflickr.com/100/100/boy?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="cat"] {
            background-image:url(https://loremflickr.com/100/100/cat?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="dog"] {
            background-image:url(https://loremflickr.com/100/100/dog?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="car"] {
            background-image:url(https://loremflickr.com/100/100/car?random=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="house"] {
            background-image:url(https://loremflickr.com/100/100/house?random=1);
            width: 100px;
            height: 100px;
            }
    </style>
 
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
	const tab = document.querySelector('table');
	const cells = [...document.querySelectorAll('td.Image')];
	cells.sort(() =>Math.round(Math.random())-0.5);
	tab.rows[0].append(...cells.slice(0,3));
	tab.rows[1].append(...cells.slice(3));
})
</script>
</head>
<body>
  
<table align="center" cellspacing="0" cellpadding="0">
            <tr>
                <td class="Image" data-id="girl"></td>
                <td class="Image" data-id="boy"></td>
                <td class="Image" data-id="cat"></td>                
            </tr>
            <tr>
                <td class="Image" data-id="dog"></td>
                <td class="Image" data-id="car"></td>
                <td class="Image" data-id="house"></td>                
            </tr>
        </table>
         
</body>
</html>

Цитата:

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

вы берете из "отсортированного" массива только первые 4 элемента и их потом лепите в одну строку и только к ним применяете .show().

Задумано, что рандомно будут браться только 4 элемента, поэтому отображаться должны тоже 4 в виде таблицы 2×2

Если учитесь НОВОМУ, то забудьте про jquery. Он слишком старый.

Цитата:

Сообщение от Борис К

Задумано, что рандомно будут браться только 4 элемента, поэтому отображаться должны тоже 4 в виде таблицы 2×2

Тогда строки 47-48
tab.rows[0].innerHTML = '';
tab.rows[0].append(...cells.slice(0,2));
tab.rows[1].innerHTML = '';
tab.rows[1].append(...cells.slice(2,4));

Цитата:

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

Если учитесь НОВОМУ, то забудьте про jquery. Он слишком старый.

Да, я "догадывался"... благодарю за подсказку!)
Voraa, всё отлично сработало... большое Вам спасибо за ценную помощь!
:dance:

Voraa, а какую строку следовало бы прописать в ваш код, чтобы кнопка <button id="btn">New</button> создавала новую комбинацию изображений в таблице?
*Самостоятельно не осилил :cray: *