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)

Борис К

23.06.2023 09:30

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

Здравствуй, 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:

voraa

23.06.2023 09:50

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

Борис К

23.06.2023 10:03

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

Борис К

23.06.2023 10:24

Цитата:

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

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

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

voraa

23.06.2023 10:42

<!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>

Борис К

23.06.2023 10:42

Цитата:

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

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

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

voraa

23.06.2023 10:44

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

voraa

23.06.2023 10:46

Цитата:

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

Задумано, что рандомно будут браться только 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));

Борис К

23.06.2023 11:17

Цитата:

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

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

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

Борис К

23.06.2023 17:22

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

voraa

23.06.2023 17:48

Комбинация будет новой, но сами рисунки старые

<!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')];
	const btn = document.getElementById('btn');
	function show2x2 () {
		cells.sort(() =>Math.round(Math.random())-0.5);
		tab.rows[0].innerHTML = '';
		tab.rows[0].append(...cells.slice(0,2));
		tab.rows[1].innerHTML = '';
		tab.rows[1].append(...cells.slice(2,4));
	};
	btn.addEventListener('click', show2x2);
	show2x2();
});
</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>
        <button id="btn">New</button> 
</body>
</html>

voraa

23.06.2023 19:13

А вот так и картинки меняются

<!DOCTYPE html>
<html>
<head>
<style id="style">    
		[data-id] {
            width: 100px;
            height: 100px;
		}
        [data-id="girl"] {
            background-image:url(https://loremflickr.com/100/100/girl?random=1);
            }
  
         [data-id="boy"] {
            background-image:url(https://loremflickr.com/100/100/boy?random=1);
            }
  
         [data-id="cat"] {
            background-image:url(https://loremflickr.com/100/100/cat?random=1);
            }
  
         [data-id="dog"] {
            background-image:url(https://loremflickr.com/100/100/dog?random=1);
            }
  
         [data-id="car"] {
            background-image:url(https://loremflickr.com/100/100/car?random=1);
            }
  
         [data-id="house"] {
            background-image:url(https://loremflickr.com/100/100/house?random=1);
            }
    </style>
 
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
	const tab = document.querySelector('table');
	const cells = [...document.querySelectorAll('td.Image')];
	const btn = document.getElementById('btn');
	
	let nr = 1;
	function changeStyle () {
		nr++;
		cells.forEach (cell=>{
			const id = cell.dataset.id;
			cell.style.backgroundImage = `url(https://loremflickr.com/100/100/${id}?random=${nr})`;
		})
	}
	
	function show2x2 () {
		cells.sort(() =>Math.round(Math.random())-0.5);
		tab.rows[0].innerHTML = '';
		tab.rows[0].append(...cells.slice(0,2));
		tab.rows[1].innerHTML = '';
		tab.rows[1].append(...cells.slice(2,4));
	};
	
	btn.addEventListener('click', () => {changeStyle(); show2x2()});
	show2x2();
});
</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>
        <button id="btn">New</button> 
</body>
</html>

Борис К

23.06.2023 20:03

Да, Вы отлично всё поняли! Варианты с кнопкой работают просто идеально :dance:
Voraa, огромное спасибо Вам! :thanks:

Борис К

06.07.2023 08:07

Здравствуйте, Voraa! :victory:
В принципе возможно ли реализовать то, что я нафантазировал ниже, разбирая код, представленный выше Вами?)
Например, в таблице рандомно отразились изображения чисел "6", "1", "4", "2". Необходимо пройтись кликами по ним в порядке возрастания "1", "2", "4", "6" до выведения alert "OK!"
P.S. Понимаю, что изображения должны быть переименованы в "01.jpg", "02.jpg" и т.д.

<!DOCTYPE html>
<html>
<head>
<style>       
        [data-id="1"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
            width: 100px;
            height: 100px;
            }
  
         [data-id="2"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
            width: 100px;
            height: 100px;
            }
  
         [data-id="3"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
            width: 100px;
            height: 100px;
            }
  
         [data-id="4"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
            width: 100px;
            height: 100px;
            }
  
         [data-id="5"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
            width: 100px;
            height: 100px;
            }
  
         [data-id="6"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
            width: 100px;
            height: 100px;
            }
    </style>
 
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
	const tab = document.querySelector('table');
	const cells = [...document.querySelectorAll('td')];
	const btn = document.getElementById('btn');
        let win;
	function show2x2 () {
		cells.sort(() =>Math.round(Math.random())-0.5);
		tab.rows[0].innerHTML = '';
		tab.rows[0].append(...cells.slice(0,2));
		tab.rows[1].innerHTML = '';
		tab.rows[1].append(...cells.slice(2,4));
	};

        if (win) alert("OK!");

	btn.addEventListener('click', show2x2);
	show2x2();
});
</script>
</head>
<body>
  
        <table>
            <tr>
                <td data-id="1"></td>
                <td data-id="2"></td>
                <td data-id="3"></td>               
            </tr>
            <tr>
                <td data-id="4"></td>
                <td data-id="5"></td>  
                <td data-id="6"></td>               
            </tr>
        </table>
        <button id="btn">New</button> 
</body>
</html>

voraa

06.07.2023 08:48

<html>
<head>
<style> 
td {
	width: 100px;
	height: 100px;
}
        [data-id="1"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
            }
   
         [data-id="2"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
            }
   
         [data-id="3"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
            }
   
         [data-id="4"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
            }
   
         [data-id="5"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
            }
   
         [data-id="6"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
            }
    </style>
  
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
    const tab = document.querySelector('table');
    const cells = [...document.querySelectorAll('td')];
    const btn = document.getElementById('btn');
    
    let nclick;
    let wiewCellsNum = [];
    
    function show2x2 () {
        cells.sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
        nclick = 0;
        wiewCellsNum = [...document.querySelectorAll('td')]
			.map(td => +td.dataset.id)
			.sort();
    }
    
    tab.addEventListener('click', ({target}) => {
		if (target.nodeName === 'TD') {
			const curnum = +target.dataset.id;
			if (curnum != wiewCellsNum[nclick]) {
				alert ('Error! Try again.')
			} else {
				nclick++;
				if (nclick === 4) alert("OK!");
			}
		}
    });
 
 
    btn.addEventListener('click', show2x2);
    show2x2();
});
</script>
</head>
<body>
   
        <table>
            <tr>
                <td data-id="1"></td>
                <td data-id="2"></td>
                <td data-id="3"></td>              
            </tr>
            <tr>
                <td data-id="4"></td>
                <td data-id="5"></td> 
                <td data-id="6"></td>              
            </tr>
        </table>
        <button id="btn">New</button>
</body>
</html>

Борис К

06.07.2023 10:32

Чудеса JS-волшебства! :dance:

Цитата:

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

td {
width: 100px;
height: 100px;
}

Да, спасибо, что напомнили!) Я упустил этот момент оформления стилей, увлёкшись другим вопросом...
Voraa, моя огромная благодарность за полученные знания! :thanks: :thanks: :thanks:
P.S. Я провозился :write: приличное количество времени с ещё одной кнопкой, которая бы перемешивала уже созданную таблицу, а не создавала новую, но безрезультатно :cray: ... такое возможно?

рони	06.07.2023 10:54

Цитата:

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

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

<html>
<head>
<style>
td {
    width: 100px;
    height: 100px;
}
        [data-id="1"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
            }

         [data-id="2"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
            }

         [data-id="3"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
            }

         [data-id="4"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
            }

         [data-id="5"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
            }

         [data-id="6"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
            }
    </style>

<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
    const tab = document.querySelector('table');
    const cells = [...document.querySelectorAll('td')];
    const btn = document.getElementById('btn');

    let nclick;
    let wiewCellsNum = [];

    function show2x2 () {
        cells.sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
        nclick = 0;
        wiewCellsNum = [...document.querySelectorAll('td')]
            .map(td => +td.dataset.id)
            .sort();
    }
    function mix2x2 () {
        let cells = [...document.querySelectorAll('td')].sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
        nclick = 0;
        wiewCellsNum = [...document.querySelectorAll('td')]
            .map(td => +td.dataset.id)
            .sort();
    }
    tab.addEventListener('click', ({target}) => {
        if (target.nodeName === 'TD') {
            const curnum = +target.dataset.id;
            if (curnum != wiewCellsNum[nclick]) {
                alert ('Error! Try again.')
            } else {
                nclick++;
                if (nclick === 4) alert("OK!");
            }
        }
    });


    btn.addEventListener('click', show2x2);
    show2x2();
    blend.addEventListener('click', mix2x2);
});
</script>
</head>
<body>

        <table>
            <tr>
                <td data-id="1"></td>
                <td data-id="2"></td>
                <td data-id="3"></td>
            </tr>
            <tr>
                <td data-id="4"></td>
                <td data-id="5"></td>
                <td data-id="6"></td>
            </tr>
        </table>
        <button id="btn">New</button>
        <button id="blend">Mix</button>
</body>
</html>

Борис К

06.07.2023 11:04

Вот оно что! :dance: :thanks:
Я был крайне далёк от самостоятельного решения :cray:
Voraa, Рони, какие же вы молодцы!!!!
:thanks: :thanks: :thanks: :thanks: :thanks:

Борис К

06.07.2023 12:27

Рони, извините, что морочу голову своими "экспериментами", сам себе усложняя задачу, но так интереснее обучаться новому :write:
А возможно, чтобы изображения менялись местами при очередном клике на них, а не через кнопку?
Я тупо переместил id="blend" из button в table, но тогда при перемешивании нарушается правильная очерёдность кликов на изображениях... такое вообще возможно реализовать?

voraa

06.07.2023 12:52

<html>
<head>
<style>
td {
    width: 100px;
    height: 100px;
}
        [data-id="1"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
            }
 
         [data-id="2"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
            }
 
         [data-id="3"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
            }
 
         [data-id="4"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
            }
 
         [data-id="5"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
            }
 
         [data-id="6"] {
            background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
            }
    </style>
 
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
    const tab = document.querySelector('table');
    const cells = [...document.querySelectorAll('td')];
    const btn = document.getElementById('btn');
 
    let nclick;
    let wiewCellsNum = [];
 
    function show2x2 () {
        cells.sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
        nclick = 0;
        wiewCellsNum = [...document.querySelectorAll('td')]
            .map(td => +td.dataset.id)
            .sort();
    }
    
    function mix2x2 () {
        let cells = [...document.querySelectorAll('td')].sort(() =>Math.round(Math.random())-0.5);
        tab.rows[0].innerHTML = '';
        tab.rows[0].append(...cells.slice(0,2));
        tab.rows[1].innerHTML = '';
        tab.rows[1].append(...cells.slice(2,4));
    }
    
    tab.addEventListener('click', ({target}) => {
        if (target.nodeName === 'TD') {
            const curnum = +target.dataset.id;
            if (curnum != wiewCellsNum[nclick]) {
                alert ('Error! Try again.')
            } else {
                nclick++;
                if (nclick === 4) {
					alert("OK!");
					nclick = 0;
				}
            }
           mix2x2();
        }
    });
 
 
    btn.addEventListener('click', show2x2);
    show2x2();
    blend.addEventListener('click', () => {mix2x2(); nclick = 0});
});
</script>
</head>
<body>
 
        <table>
            <tr>
                <td data-id="1"></td>
                <td data-id="2"></td>
                <td data-id="3"></td>
            </tr>
            <tr>
                <td data-id="4"></td>
                <td data-id="5"></td>
                <td data-id="6"></td>
            </tr>
        </table>
        <button id="btn">New</button>
        <button id="blend">Mix</button>
</body>
</html>

Борис К

06.07.2023 13:29

рони	06.07.2023 14:14

Цитата:

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

.sort();

на всякий случай строка 51 пост #20

.sort((a,b) => a - b);

Борис К

07.07.2023 10:30

Рони, спасибо за дополнение! :thanks:

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