Gerer affichage d'un tableau

Bonjour,

Je souhaiterais avoir un coup de pouce sur le code java script, sur le tableau je dois gérer l'affichage d'une table opération en insérant les champs ou les supprimer les colonnes de la table, mais c'est le js qui pose problème, je vous envoie le code js que j'avais commencé car j'ai copié le code php mais il me dit que le message est long. Sinon je copie une parti du code php ( une ligne du tableau car tous les lignes sont identiques) pour que vous puissiez vous référer.

Merci d'avance!
Cordialement,

var tabLstIdent = new Array();

var tabNomLstCoulLig = new Array("lstEtatOpeCoulLig", "lstEtatTransCoulLig", "lstEtatEtudeCoulLig");
var tabNomLstCoulTxt = new Array("lstEtatOpeCoulTxt", "lstEtatTransCoulTxt", "lstEtatEtudeCoulTxt");


//=================================================================================
//     Valide les Valeurs du Format Tableau
//=================================================================================
function valider(){
         
//*************** Compte le Nombre de Champs Selectionné ***************
 var nbChamps = ctrlLecture("nbChamps");
    var nbChampsSel = 0;
    var nomLstErr   = "";
 for(var i=1; i<=nbChamps; i++){
        if(ctrlLecture("lstChampsTabAff["+i+"]") != -1){
            nbChampsSel = nbChampsSel + 1;
        }else{
            if(nomLstErr == ""){
                if(ctrlLecture("lstGroupeChamps["+i+"]") == -1){
                    nomLstErr = "lstGroupeChamps["+i+"]";
                }else{
                    nomLstErr = "lstChampsTabAff["+i+"]";
                }
            }
        }
 }
    
//*************** Vérification des Valeurs Saisie ou Selectionnées ***************     
    var tabVerif = new Array();
    tabVerif.push(Array(null, "txtNom", "nbCar", "<", 3, "Saisie d'un nom d'aux moins trois caractères obligatoire"));
    if(nbChampsSel < 3){
        tabVerif.push(Array(null, nomLstErr, "erreur", null, null, "Sélection d'au moins trois champs obligatoire"));
    }
    var retourVerif = frmVerifValeur("objForm", tabVerif);
    
//*************** Affiche Message Erreur Saisie ***************
    if(retourVerif !== true){
        messageErrSaisie(retourVerif);
        return;
    }  
    
//*************** Valide la saisie ***************   
    ouvrirPage("prog_maj_format_tableau", 1, -1);    
    
}
//=================================================================================
//     Suppression du Format Tableau
//=================================================================================
function supprimer(){

//*************** Paramètre l'Action de Suppression ***************
    ctrlInitValeur("numAction", 1);
    ctrlInitValeur("lstIdAction", ctrlLecture("idFormat"));

//*************** Execute l'Action de Suppression ***************
    ouvrirPage("prog_act_format_tableau", 1, 1);

}
//=================================================================================
//     Retour à la page précedente
//=================================================================================
function annuler(){

    switch(ctrlLecture("retourForm")){
    case "0": ouvrirPage("prog_tableau", 0, iIf(frmModifier("objForm") == true, 0, -1)); break;
    case "1": ouvrirPage("prog_tab_format_tableau", 0, iIf(frmModifier("objForm") == true, 0, -1)); break;}

}
//=================================================================================
//     Mise à Jour du bloc "Format Tableau"
//=================================================================================
function majFormat(init){
    
//*************** Initialise les Liste de Configuration du Surlignage *************** 
    if(init == true){
        ctrlInitValeur("lstCoulLigSurligne", ctrlLecture("surligneLigne"));
        ctrlInitValeur("lstCoulTxtSurligne", ctrlLecture("surligneTexte"));
    }
        
//*************** Marque le Bloc "Modifié" ***************    
    if(init == false){ctrlInitValeur("majFormat", 1);}    
    
}

//=================================================================================
//     Insertion d'une Liste Champs
//=================================================================================
function insertChampsTab(index){
    
//*************** Nombre de Champs ***************
 var nbChamps = ctrlLecture("nbChamps");

//*************** Décale les selections vers le Bas ***************
 for(var i=nbChamps; i>index; i--){
        ctrlInitValeur("lstGroupeChamps["+i+"]", ctrlLecture("lstGroupeChamps["+(i - 1)+"]"));
  initLstChamps(ctrlLecture("lstGroupeChamps["+i+"]"), i);
        ctrlInitValeur("lstChampsTabAff["+i+"]", ctrlLecture("lstChampsTabAff["+(i - 1)+"]"));
        ctrlInitValeur("lstChampsTabTrie["+i+"]", ctrlLecture("lstChampsTabTrie["+(i - 1)+"]"));
 }
 ctrlInitValeur("lstGroupeChamps["+i+"]", -1);
 ctrlInitValeur("lstChampsTabAff["+i+"]", -1);
 ctrlInitValeur("lstChampsTabTrie["+i+"]", -1);

//*************** Mise à Jour des Listes et Bouton ***************
    majAffChamps(false);
        
}
//=================================================================================
//     Suppression d'une Liste Champs
//=================================================================================
function supprChampsTab(index){

//*************** Nombre de Champs ***************
 var nbChamps = ctrlLecture("nbChamps");

//*************** Décale les selection vers le Haut ***************
 for(var i=index; i<=nbChamps; i++){
  if(i < nbChamps){
   ctrlInitValeur("lstGroupeChamps["+i+"]", ctrlLecture("lstGroupeChamps["+(i + 1)+"]"));
   ctrlInitValeur("lstGroupeChamps["+(i + 1)+"]", -1);
   initLstChamps(ctrlLecture("lstGroupeChamps["+i+"]"), i);
   ctrlInitValeur("lstChampsTabAff["+i+"]", ctrlLecture("lstChampsTabAff["+(i + 1)+"]"));
   ctrlInitValeur("lstChampsTabAff["+(i + 1)+"]", -1);
   ctrlInitValeur("lstChampsTabTrie["+i+"]", ctrlLecture("lstChampsTabTrie["+(i + 1)+"]"));
   ctrlInitValeur("lstChampsTabTrie["+(i + 1)+"]", -1);
  }else{
   ctrlInitValeur("lstGroupeChamps["+i+"]", -1);
   ctrlInitValeur("lstChampsTabAff["+i+"]", -1);
   ctrlInitValeur("lstChampsTabTrie["+i+"]", -1);
  }
 }
        
//*************** Mise à Jour des Listes et Bouton ***************
    majAffChamps(false);
    
}
//=================================================================================
//     Mise à Jour du bloc "Format Tableau"
//=================================================================================
function majAffChamps(init){
    
//*************** Nombre de Champs ***************
 var nbChamps = ctrlLecture("nbChamps");
 
//*************** Initialise les Listes Groupe, Champs et Trie ***************
    if(init == true){
  if(ctrlLecture("lstChampsSel") != ""){
   var tabChampsSel = ctrlLecture("lstChampsSel").split(",");
   for(var i=1; i<=nbChamps; i++){
    var j = (i - 1) * 3;
    if(j < tabChampsSel.length){
     initLstChamps(tabChampsSel[j], i);
     ctrlInitValeur("lstGroupeChamps["+i+"]", tabChampsSel[j]);
     ctrlInitValeur("lstChampsTabAff["+i+"]", tabChampsSel[j + 1]);
     ctrlInitValeur("lstChampsTabTrie["+i+"]", tabChampsSel[j + 2]);
    }
   }
  }
  
//*************** Si Selection d'une Liste des Groupes de Champs ***************
    }else{
        var lstSel = frmCtrlEvent("objForm");
        if(lstSel != ""){
            if(lstSel.indexOf("lstGroupeChamps") == 0){
                var p1    = lstSel.indexOf("[") + 1;
                var p2    = lstSel.indexOf("]");
                var index = lstSel.substring(p1, p2); 
                       
//*************** Initialise la Liste des Champs ***************
                initLstChamps(ctrlLecture(lstSel), index);
           }
      
//*************** Vérifie si Doublon de Selection ***************
   if(lstSel.indexOf("lstChampsTabAff") == 0){
    for(var i=1; i<=nbChamps; i++){
     var nomLst = "lstChampsTabAff["+i+"]";
     if(nomLst != lstSel){
      if(ctrlLecture(nomLst) == ctrlLecture(lstSel)){
       ctrlSelIndex(nomLst, 0);
      }
     }
    }
   }
        }
    }
    
//*************** Etat des Listes et Boutons ***************    
    for(var i=1; i<=nbChamps; i++){
        ctrlEtat("lstChampsTabAff["+i+"]", iIf(ctrlLecture("lstGroupeChamps["+i+"]") != -1, 1, -1));
        ctrlEtat("lstChampsTabTrie["+i+"]", iIf(ctrlLecture("lstChampsTabAff["+i+"]") != -1, 1, -1));
    }

//*************** Marque le Bloc "Modifié" ***************    
    if(init == false){ctrlInitValeur("majAffChamps", 1);}      
    
}
//=================================================================================
//     Initialise une Liste de Champs en Fonction d'un Groupe
//=================================================================================
function initLstChamps(identGroupe, iListe){

    var tabParametre = new Array();

    ctrlRazIndex("lstChampsTabAff["+iListe+"]");
    tabParametre["groupe"] = identGroupe;
            
//*************** Lecture et des Champs du Groupe si pas Déja Chargé ***************
 if(!tabLstIdent[tabParametre["groupe"]]){
  var retourAjax = ajaxExecution("prog_scr_champs_groupe", tabParametre, 0);
  tabLstIdent[tabParametre["groupe"]] = ajaxRetourItem(retourAjax, "ident", "intitule", null);
 }
 
//*************** Initialisation la Liste Champs ***************
    ctrlInitIndex("lstChampsTabAff["+iListe+"]", tabLstIdent[tabParametre["groupe"]], true); 
 
}
//=================================================================================
//     Fonction de Mise en Etat des Controls au Démarage de la page
//=================================================================================
function exeFinPage(){
    
//*************** Activation du Formulaire ***************
    var tabFnt = new Array();
    tabFnt["_execLoad"] = Array("majFormat(true)", "majColoriage(true)", "majAffChamps(true)");
    tabFnt["format"]    = Array("majFormat(false)");
    tabFnt["coloriage"] = Array("majColoriage(false)");
    tabFnt["affChamps"] = Array("majAffChamps(false)");
    frmActivation("objForm", tabFnt);
 
}
//=================================================================================
//     Ajoute des Items à un objet Liste
//=================================================================================
function ajaxRetourItem(xmlHttp, elementValeur, elementIntitule, tabElementAnnexe){

 var tabValeur = new Array();

//*************** Lecture des Données ***************
 if((xmlHttp.readyState == 4) && (xmlHttp.status == 200)){
  var docXml = xmlHttp.responseXML;
  var index  = docXml.getElementsByTagName(elementValeur);
  var texte  = docXml.getElementsByTagName(elementIntitule);
        var tabAnnexe = new Array();
        for(var i in tabElementAnnexe){
            tabAnnexe[tabElementAnnexe[i]] = docXml.getElementsByTagName(tabElementAnnexe[i]);
        }

//*************** Lecture des Elements***************
        if((index.length != 0) && (texte.length == index.length)){
            for(var i = 0; i < index.length; i++){
                tabValeur[i] = new Array();
                
//*************** Lecture des Elements Mode FireFox ***************
    if(texte.item(i).textContent){
     tabValeur[i]["valeur"]   = index.item(i).textContent;
                    tabValeur[i]["intitule"] = texte.item(i).textContent;
                    for(nomAnnexe in tabAnnexe){
                        tabValeur[i][nomAnnexe] = tabAnnexe[nomAnnexe].item(i).textContent;
                    }
                    
//*************** Lecture des Elements Mode IE ***************
    }else{
     tabValeur[i]["valeur"]   = index.item(i).text;
                    tabValeur[i]["intitule"] = texte.item(i).text;
                    for(nomAnnexe in tabAnnexe){
                        tabValeur[i][nomAnnexe] = tabAnnexe[nomAnnexe].item(i).text;
                    }
    }     
            }

//*************** Ajout de la Valeur dans le Tableau ***************
      return tabValeur;
            
//*************** Si pas de Valeurs ***************
  }else{
            return tabValeur;
  }
          
//*************** Erreur de Lecture du Fichier ***************
 }else{
  alert("Erreur Ajax fonction \"ajaxRetourItem\" lecture des éléments \""+elementValeur+"\" et \""+elementIntitule+"\"");
  return false;
 }
    
}
//=================================================================================
//     Lecture des Valeurs Remontées par un Script Ajax
//=================================================================================
function ajaxRetourListe(xmlHttp, nomElement){

 var tabValeur = new Array();

//*************** Lecture des Données ***************
 if((xmlHttp.readyState == 4) && (xmlHttp.status == 200)){
  var docXml = xmlHttp.responseXML;
  var texte  = docXml.getElementsByTagName(nomElement);

//*************** Lecture de la Liste ***************
  if(texte.length != 0){
            for(var i = 0; i < texte.length; i++){
    if(texte.item(i).textContent){
     tabValeur[i] = texte.item(i).textContent;
    }else{
     tabValeur[i] = texte.item(i).text;
    }                
            }

//*************** Ajout de la Valeur dans le Tableau ***************
      return tabValeur;

//*************** Si pas de Valeurs ***************
  }else{
      return tabValeur;
  }
         
//*************** Erreur de Lecture du Fichier ***************
 }else{
  alert("Erreur Ajax fonction \"ajaxRetourListe\" lecture de l'élément \""+nomElement+"\"");
  return false;
 }

}
//=================================================================================
//     Lecture de la Totalité du Flux
//=================================================================================
function ajaxRetourFlux(xmlHttp){

//*************** Lecture des Données ***************
 if((xmlHttp.readyState == 4) && (xmlHttp.status == 200)){
  return xmlHttp.responseText;

//*************** Erreur de Lecture du Fichier ***************
 }else{
  alert("Erreur Ajax fonction \"ajaxRetourFlux\"");
  return false;
 }

}

<?php
session_start();
?>
<?php
require('bdconnect.php');
//liste des champs de la table
//-------------------------------------//

$sql = "SHOW COLUMNS FROM bde.operations";
 
//Execution de la requete pour les champs de la table operation
try{
  $requete = $bdd_connection -> prepare($sql) ;
  $requete->execute();
  $liste_champs = $requete->fetchAll(); //on stocke le resultat dans un array
}catch(Exception $e){
  // en cas d'erreur :
   echo " Erreur ! ".$e->getMessage();
   echo " Les datas : " ;
  print_r($datas);
}
?>
<!DOCTYPE html>
<html>
<body>
<section class="content" style="margin-top: -20px;"> 
<table width="100%" height="100%" align="center" border="0" cellpadding="0" cellspacing="0">
  <tr valign="top" align="center">
    <td height="100%"><table width="100%" height="100%" align="center" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>
<!-- CTRL "Icone Lien" : retourPage -->
<div id="retourPage" ident="_objIconLien" nomObjet="retourPage" verrou="0" nomCtrlValeur="ctrl_595ba98ddb15c6-41413278_544">
 <img type="image" id="ctrl_595ba98ddb15c6-41413278_544" name="ctrl_595ba98ddb15c6-41413278_544" class="styleIconeLien" style="display: block;" src="_commun/images/retour_icon.gif" border="0" onClick="annuler()">
</div>
<!-- Fin "Icone Lien" -->
</td>
                <td width="100%" class="styleTitreFormulaire">Initialise un format d'affichage</td>
                <td> </td>
              </tr>
            </table></td>
        </tr>
</td></tr></table></td></tr></table></td></tr></table></td></tr></table></div></td>
                </tr>
                <tr>
                  <td><div id="champs" objImgPliage="ctrl_59423ad0b488b0-47625125_549" objBlocPliage="ctrl_59423ad0b488b0-47625125_550"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="styleCadreBloc1">
       <tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr style="background-color: #FF8C00;">
              <td class="styleTitreBloc2">Valider / Inserer / supprimer / annuler une Opération</td></tr></table></td></tr><tr id="ctrl_59423ad0b488b0-47625125_550" style="background-color: #FFFFFF;"><td class="styleCorpsBloc"><table width="100%" border="0" cellspacing="0" cellpadding="0" onDblClick=""><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="100%" valign="top"><table width="100%" border="0" cellspacing="3" cellpadding="0"><tr><td class="styleFicheIntitule"><div>Champs 1 : <br/></div></td> <br/> <td nowrap valign="top">
<!-- CTRL "Liste Table" : lstGroupeChamps[1] -->
<div id="lstGroupeChamps[1]" ident="_objListeItem" nomObjet="lstGroupeChamps[1]" class="styleListeExt" style="width: 120px" classItem="styleItemListe" verrou="0" nomDivErr="ctrl_59510d2bbed405-77027068_144" nomCtrlValeur="ctrl_59510d2bbed405-77027068_145" valeurNull="-1" texteNull="...">
<div id="ctrl_59510d2bbed405-77027068_144">
 <select id="ctrl_59510d2bbed405-77027068_145" name="ctrl_59510d2bbed405-77027068_145" class="styleListe" style="display: block;" onChange="ctrlTagErr('lstGroupeChamps[1]', 0);_majCtrlListe('ctrl_59510d2bbed405-77027068_145');frmModifCtrl(event, 'affChamps')" onKeyUp="if((event.keyCode == 38) || (event.keyCode == 40)){ctrlTagErr('lstGroupeChamps[1]', 0);_majCtrlListe('ctrl_59510d2bbed405-77027068_145');frmModifCtrl(event, 'affChamps');}">
  <option value="-1" class="styleItemListe" selected>...</option> 
  <option value="01-operations">operations</option>
  <option value="02-operations">operations</option>
  <option value="03-operations">operations</option>
  <option value="04-operations">operations</option>
  <option value="05-operations">operations</option>
  <option value="06-operations">operations</option>
  <option value="07-operations">operations</option>
  <option value="08-operations">operations</option>
 </select>
</div></div>
<!-- Fin "Liste Table" -->
</td><td nowrap valign="top">
<!-- CTRL "Liste Table" : lstChampsTabAff[1] table operation-->
<div id="lstChampsTabAff[1]" ident="_objListeItem" nomObjet="lstChampsTabAff[1]" class="styleListeExt" style="width: 280px" classItem="styleItemListe" verrou="0" nomDivErr="ctrl_59520e8736cc96-55973896_146" nomCtrlValeur="ctrl_59520e8736cc96-55973896_147" valeurNull="-1" texteNull="** Sélectionner... **">
<div id="ctrl_59520e8736cc96-55973896_146">
 <select id="ctrl_59520e8736cc96-55973896_147" name="ctrl_59520e8736cc96-55973896_147" class="styleListe" style="display: block;" onChange="ctrlTagErr('lstChampsTabAff[1]', 0);_majCtrlListe('ctrl_59520e8736cc96-55973896_147');frmModifCtrl(event, 'affChamps')" onKeyUp="if((event.keyCode == 38) || (event.keyCode == 40)){ctrlTagErr('lstChampsTabAff[1]', 0);_majCtrlListe('ctrl_59520e8736cc96-55973896_147');frmModifCtrl(event, 'affChamps');}">
  <option value="-1" class="styleItemListe" selected>** Sélectionner... **</option>
   <?php
     //-------------------------------------//
     // Boucle sur l'array si pas vide
     //-------------------------------------//
      if(!empty($liste_champs)){
        foreach($liste_champs as $champ){
         $field = $champ['Field'];
         $Type = $champ['Type'];
         echo "<option value='$field'>$field</option>";
        }
      }     
     ?>
  </select>
</div></div>
<!-- Fin "Liste Table" -->
</td><td nowrap valign="top">
<!-- CTRL "Bouton Texte" : bpInsertChampsTab[1] -->
<div id="bpInsertChampsTab[1]" ident="_objBouton" nomObjet="bpInsertChampsTab[1]" verrou="0" nomCtrlBp="ctrl_59520e8736cc96-55973896_148">
 <input type="button" id="ctrl_59520e8736cc96-55973896_148" name="ctrl_59520e8736cc96-55973896_148" class="styleBoutonMini" style="display: block;width: 60px" value="Inserer" onClick="insertChampsTab(1)">
</div>
<!-- Fin "Bouton Texte" -->
</td><td nowrap valign="top">
<!-- CTRL "Bouton Texte" : bpSupprChampsTab[1] -->
<div id="bpSupprChampsTab[1]" ident="_objBouton" nomObjet="bpSupprChampsTab[1]" verrou="0" nomCtrlBp="ctrl_59520e8736cc96-55973896_149">
 <input type="button" id="ctrl_59520e8736cc96-55973896_149" name="ctrl_59520e8736cc96-55973896_149" class="styleBoutonMini" style="display: block;width: 60px" value="Suppr." onClick="supprChampsTab(1)">
</div>
<!-- Fin "Bouton Texte" -->
</td><td nowrap width="100%" valign="top">
<!-- CTRL "Liste Table" : lstChampsTabTrie[1] -->
<div id="lstChampsTabTrie[1]" ident="_objListeItem" nomObjet="lstChampsTabTrie[1]" class="styleListeExt" style="width: 100px" classItem="styleItemListe" verrou="0" nomDivErr="ctrl_594d14920abc42-28745163_150" nomCtrlValeur="ctrl_594d14920abc42-28745163_151" valeurNull="-1" texteNull="...">
<div id="ctrl_59423ad0b488b0-47625125_150">
 <select id="ctrl_59423ad0b488b0-47625125_151" name="ctrl_59423ad0b488b0-47625125_151" class="styleListe" style="display: block;" onChange="ctrlTagErr('lstChampsTabTrie[1]', 0);_majCtrlListe('ctrl_59423ad0b488b0-47625125_151');frmModifCtrl(event, 'affChamps')" onKeyUp="if((event.keyCode == 38) || (event.keyCode == 40)){ctrlTagErr('lstChampsTabTrie[1]', 0);_majCtrlListe('ctrl_59423ad0b488b0-47625125_151');frmModifCtrl(event, 'affChamps');}">
  <option value="-1" class="styleItemListe" selected>...</option>
  <option value="0" class="styleItemListe">Croissant</option>
  <option value="1" class="styleItemListe">Décroissant</option>
 </select>
</div></div>
<!-- Fin "Liste Table" -->
     <tr>
          <td class="styleLigBoutonFormulaire"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center">
<!-- CTRL "Bouton Texte" : bpValider -->
<div id="bpValider" ident="_objBouton" nomObjet="bpValider" verrou="0" nomCtrlBp="ctrl_5952668b49d007-46274585_564">
 <input type="button" id="ctrl_5952668b49d007-46274585_564" name="ctrl_5952668b49d007-46274585_564" class="styleBoutonFormulaire" style="display: block;" value="Valider" onClick="valider()">
</div>
<!-- Fin "Bouton Texte" -->
</td><td align="center">
<!-- CTRL "Bouton Texte" : bpSupprimer -->
<div id="bpSupprimer" ident="_objBouton" nomObjet="bpSupprimer" verrou="0" nomCtrlBp="ctrl_5952668b49d007-46274585_565">
 <input type="button" id="ctrl_5952668b49d007-46274585_565" name="ctrl_5952668b49d007-46274585_565" class="styleBoutonFormulaire" style="display: block;" value="Supprimer" onClick="supprimer()">
</div>
<!-- Fin "Bouton Texte" -->
</td><td align="center">
<!-- CTRL "Bouton Texte" : bpAnnuler -->
<div id="bpAnnuler" ident="_objBouton" nomObjet="bpAnnuler" verrou="0" nomCtrlBp="ctrl_5952668b49d007-46274585_566">
 <input type="button" id="ctrl_5952668b49d007-46274585_566" name="ctrl_5952668b49d007-46274585_566" class="styleBoutonFormulaire" style="display: block;" value="Annuler" onClick="annuler()">
</div>
<!-- Fin "Bouton Texte" -->
</td></tr></table></td>
        </tr>
      </table></td>
  </tr>
</table>
</section>
<script src="js/tableauaffichage_js.js" type="text/javascript"></script>
</body>
</html>