Voici ton code entièrement réécrit et cela fonctionne sur Firefox et les autres navigateurs :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>Démineur</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
//Déclaration des tableaux en variables globales
var aTab=new Array();
var bTab=new Array();
function choixprop(){
var formulaire=document.getElementById("formulaire");
var A=0;
var n=0;
for (n=0;n<3;n++) {
if (formulaire.elements[n].checked) {
A=formulaire.elements[n].value;
break;
}
}
fonction1(A);
}
function fonction1(A){
//Remplissage des tableaux
var n=0;
var j=0;
if (aTab.length>0) {//suppression des éléments des tableaux précédemment utilisés
for (n=aTab.length-1;n>=0;n--) {
for (j=9;j>=0;j--) {
aTab[n].pop(j);
bTab[n].pop(j);
}
aTab.pop(n);
bTab.pop(n);
}
}
for (n=0;n<A;n++) {
aTab[n]=new Array(10);
bTab[n]=new Array(10);
}
for (n=0;n<A;n++) {
for(j=0;j<10;j++) {
aTab[n][j]=j;
bTab[n][j]=" ";
}
}
//Affichage du tableau HTML
document.getElementById("afftab").style.visibility="visible";
var tabaff=document.getElementById("tabaff");
//Suppression des lignes du tableau HTML si elles existent
if (tabaff.rows.length>0) {
for (n=(tabaff.rows.length-1);n>=0;n--) {
tabaff.deleteRow(n);
}
}
//Remplissage du tableau HTML en fonction du nombre de lignes choisi.
for (n=0;n<A;n++) {
var rowaff=tabaff.insertRow(n);
for(j=0;j<10;j++) {
var u=n + "_" + j;//Variable destinée à créer un index qui permet de retrouver les valeurs n et j
var cellaff=rowaff.insertCell(j);
cellaff.innerHTML="<input id=\""+u+"\" type=\"button\" value=\" \" ondblclick=\"affichevaleur("+n+","+j+",'"+u+"',"+aTab[n][j]+")\" onclick=\"affichecouleur("+n+","+j+",'"+u+"','"+bTab[n][j]+"')\" >";
}
}
}
// fonction pour changer le style
function style(B,id){
switch (B) {
case 0 : document.getElementById(id).setAttribute("style","background-color:#0099FF; color:#66CC00;font-weight:bold; font-size:large")
break
case 1 : document.getElementById(id).setAttribute("style","background-color:#0066FF; color:#FF9933;font-weight:bold; font-size:large")
break
case 2: document.getElementById(id).setAttribute("style","background-color:#0033FF ; color:#FF6600;font-weight:bold; font-size:large")
break
case 3 : document.getElementById(id).setAttribute("style","background-color:#0000FF; color:#FF3366;font-weight:bold; font-size:large")
break
default : document.getElementById(id).setAttribute("style","background-color:#000099; color:#FF0000;font-weight:bold; font-size:large")
break}
}
function affichecouleur(a,b,id,arB){
var indexes=id.split("_");
var n=indexes[0];
var j=indexes[1];
switch (arB){
case " " :
document.getElementById(id).setAttribute("value","X" );
document.getElementById(id).setAttribute("onclick","affichecouleur("+a+","+b+",'"+id+"','1')" );
document.getElementById(id).setAttribute("style","background-color:#000055; color:white;font-weight:bold; font-size:large");
break;
case "1" :
document.getElementById(id).setAttribute("value","O" );
document.getElementById(id).setAttribute("onclick","affichecouleur("+a+","+b+",'"+id+"','2')" );
document.getElementById(id).setAttribute("style","background-color:grey; color:white;font-weight:bold; font-size:large");
break;
case "2" :
document.getElementById(id).setAttribute("value"," ");
document.getElementById(id).setAttribute("onclick","affichecouleur("+a+","+b+",'"+id+"',' ')" );
document.getElementById(id).setAttribute("style","background-color:default; font-weight:default; font-size:default");
break;
}
}
function affichevaleur(a,b,id,arA) {
document.getElementById(id).setAttribute("value",arA);
style(arA,id);
}
</script>
</head>
<body>
<p>Entrez votre choix :</p>
<form id="formulaire">
<input type="radio" name="choix" value="10" /> 10 lignes<br />
<input type="radio" name="choix" value="20" /> 20 lignes<br />
<input type="radio" name="choix" value="30" /> 30 lignes<br />
<input type="button" value="Quel est votre choix ?" onclick="choixprop()" />
</form>
<div id="afftab" style="position:relative;left:450px;visibility:hidden">
<form name="form">
<table id="tabaff" width="265" border="4" cellspacing="2">
</table>
</form>
</div>
</body>
</html>
Pour écrire un code correct, j'ai effectué les modifications suivantes :
* J'ai ajouté une déclaration <DOCTYPE> en début de document.
* J'ai ajouté des index lors du remplissage des tableaux. Sinon, Javascript ne sait pas à quel élément affecter des valeurs.
* Je vide le contenu des tableaux avant chaque nouvelle modification du nombre de lignes de la grille.
* J'ai utilisé la collection elements de l'objet DOM form pour déterminer quel bouton radio a été sélectionné.
* J'ai utilisé les méthodes insertRow() et deleteRow() de l'objet DOM table pour ajouter ou supprimer des lignes au tableau HTML.
* J'ai utilisé la méthode insertCell() de l'objet DOM tableRow pour ajouter des cellules.
* Je modifie le contenu de l'attribut onclick de la cellule cliquée pour lui attribuer sa nouvelle valeur.