JSFiddle - React, Tailwind, and code Playground

HTML

<table id="jeu">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<button id="button">Lancer</button>

CSS

#jeu {
    border-collapse: separate;
    border: 1px solid #000;
}

#jeu td {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#jeu td.vivante {
    background: #000;
}

JavaScript

function addEvent(a,b,c,d){d = d || !0;a.addEventListener?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

var td = document.querySelectorAll("#jeu td"),
    button = document.getElementById("button");

function changeCouleur(e){
	var currentTD = e.target || e.srcElement,
		currentClass = currentTD.className;

	currentTD.className = (currentClass == "") ? "vivante" : "";
}

function changerTexte(){
	var texte = button.innerHTML;
	button.innerHTML = (texte == "Lancer") ? "Modifier" : "Lancer";
}

for(var i=0, l=td.length; i<l; i++){
	addEvent(td[i], "click", changeCouleur);
}

addEvent(button, "click", changerTexte);