А вот так и картинки меняются
<!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>