Bechir Ahmed Bechir Ahmed - 6 months ago 6
HTML Question

JavaScript- How to change multiple <td> background colors randomly?

I have this page [Screenshot of my page ][1]

[1]: http://i.stack.imgur.com/hZ5fr.png and I want to change the background colors (randomly and let the colors change automatically) of every td of this table when i click Demarrer button.
Or if it's impossible how can i let one color slide between all this td ( just like a game)
Will Appreciate any help.

HTML







<body>
<div id="container">
<table width="30" border="0">
<tbody>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
<tr>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
</tr>
<tr>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
<td><div class="groupe2"></div></td>
<td><div class="groupe1"></div></td>
</tr>
</tbody>
</table>
</div>
<button onclick="animation1()">Demarrer</button>
</body>
</html>


CSS

#container table {
border: none;
margin: auto;
}


body {
width: 624px;
margin-left: auto;
margin-right: auto;
}

.groupe1 {
background-color: #000000;
float: left;
height: 30px;
width: 30px;
}
.groupe2 {
background-color:#FFDE01;
float: left;
height: 30px;
width: 30px;
}


JS

function demarrer(){
animation1();
animation2();

}


function animation1(){
var tab=document.getElementsByClassName("groupe2");

n=tab.length;
for(i=0;i<n;i++){
tab[i].style.backgroundColor="green";
}
}

function animation2(){
var tab=document.getElementsByClassName("groupe1");
n=tab.length;
for(i=10;i<n;i++){
tab[i].style.backgroundColor="red";
}
}

Answer

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}


// ****************
// initial random coloring
// ****************

$('document').ready(function(){
  //animation2();
});

// ****************
// give random color depending on group
// ****************

var color1;
var color2;
function animation1(){
   color1 = getRandomColor();
   color2 = getRandomColor();
  $('td').each(giveBackground);
}

function giveBackground(){
   $(this).find('.groupe1').css('background-color', color1);
   $(this).find('.groupe2').css('background-color', color2);
}



// ****************
// give all a random color 
// ****************

function animation2(){
  $('td').each(giveBackground2);

  setTimeout(animation2, 2000);
}

function giveBackground2(){
   $(this).find('div').css('background-color', getRandomColor());
}
#container table {
border: none;
margin: auto;
}


body {
width: 624px;
margin-left: auto;
margin-right: auto;
}

.groupe1 {
background-color: #000000;
float: left;
height: 30px;
width: 30px;
}
.groupe2 {
background-color:#FFDE01;
float: left;
height: 30px;
width: 30px;
 }
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<html >
<head>
<title></title>
<link rel="stylesheet" href="stylesprojet.css" type="text/css" />
<script src="scriptsprojet.js"></script>
</head>

<body>
<div id="container">
<table width="30" border="0">
<tbody>
<tr>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
</tr>
<tr>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
</tr>
<tr>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
</tr>
<tr>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
</tr>
<tr>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
</tr>
<tr>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
</tr>
<tr>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
</tr>
<tr>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
</tr>
<tr>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
</tr>
<tr>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
</tr>
<tr>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
</tr>
<tr>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
</tr>
<tr>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
</tr>
<tr>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
</tr>
<tr>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
</tr>
<tr>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
  <td><div class="groupe2"></div></td>
  <td><div class="groupe1"></div></td>
</tr>
</tbody>
</table>
</div>
<button onclick="animation1()">Demarrer</button>
<button onclick="animation2()">Demarrer2</button>
</body>
</html>

To keep changing, add this line to the function:

setTimeout(animation2, 2000);

2000 = miliseconds.