Salut tout le monde,
bon j'ai un problème à m'arracher les cheveux...je vous met ci-joint le code html et le fichier .js et le stylesheet
vous pouvez les mettre dans le même répertoire pour tester...
Mon problème est le suivant :
j'ai un tableau géré dynamiquement par le javascript : ajout/suppression/tri de lignes (il devient visible en choisissant type de réponse "choix unique" ou "choix multiple").
En bas de ce formulaire j'ai un bouton 'reset' qui en fait fait un appel à une fonction js car le bouton réinitialise uniquement les input, pas le tableau...donc ma fonction est censée gérer la remise "à l'identique" (suppression des lignes ajoutées) du tableau avant modification...mais voilà ça ne fonctionne pas ..... :
- ...je n'ai pas d'erreur !
- ...mes input créés dynamiquement dans les lignes du tableau sont réinitialisés aléatoirement !
- ...ceraines lignes sont supprimées mais pas toutes.
-...bref je vois pas ce qui déconne ...sauf peut-être IE7...mais là je suis dans la m...ouise pour être poli
HEEELLLLLPPPPP SVP !
Merci par avance de votre aide !
HB
=======================================================================
FICHIER HTML (index.html) :
=====================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
[ Lien ]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta Name="description" content="blabla" />
<meta Name="keywords" content=""/>
<meta http-equiv='Content-Script-Type' content='text/javascript'/>
<meta name="robots" content="index, follow, all">
<link rel="stylesheet" href="/siystylesheet.css" type="text/css" />
<title>bug</title>
<script type="text/javascript" src="/coqUtils.js"></script>
</head>
<body>
<div id="page">
<div id="headerZone">
</div>
<div id="topPage">
</div>
<div id="leftZone">
</div>
<div id="rightZone">
</div>
<div id="content">
<div id="frmQuest" style="width: 550px; background-color: #ccc;border: 1px dotted #333; padding: 5px; margin: 0px auto; display:none">
<form action="/calloffer/cohQuest.php" method="post" name="frmCoq" id="frmCoq"
enctype="multipart/form-data">
<input type="hidden" name="tpl_cohnum" value="CO00000003" />
<input type="hidden" name="tpl_coq_coqnum" value="" />
<input type="hidden" id="tpl_shwfrmquest" value="yes" disabled="disabled" />
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" >
<div class="frmrow">
<span class="frmlabel">Titre :</span>
<span class="frmfill">
<input name="tpl_coq_title" type="text" value="" size="58"
maxlength="100" />
</span>
</div>
<div class="frmrow">
<span class="frmlabel">Question :</span>
<span class="frmfill">
<textarea name="tpl_coq_quest" cols="45" rows="5"></textarea>
</span>
</div>
<div class="frmrow">
<span class="frmlabel">Réponse :</span>
<span class="frmfill">
<select name="tpl_ansmandatory">
<option value="1" >Obligatoire</option>
<option value="2" >Facultative </option>
</select>
</span>
</div>
<div class="frmrow">
<span class="frmlabel">Points :</span>
<span class="frmfill">
<input name="tpl_coq_points" type="text" value="" size="10"
maxlength="10" />
</span>
</div>
<div class="frmrow">
<span class="frmlabel">Type de réponse :</span>
<span class="frmfill">
<select name="tpl_anstyp" id="tpl_anstyp" onchange="ShowFrmQcm('tpl_anstyp','frmQcm');">
<option value="1" id="optAnstyp_1" >Texte </option>
<option value="2" id="optAnstyp_2" >Choix unique</option>
<option value="3" id="optAnstyp_3" >Choix multiple </option>
</select>
</span>
</div>
<div id="frmQcm" style="display:none">
<div class="frmrow">
<span class="frmlabel">Liste de choix :<br />
<span style="font-size:9px;">(100 rép. max.)</span>
</span>
<span class="frmfill">
<table id="tabQcm" class="blueFineTable" align="left" width="100%" >
<tr class="blueFineTr">
<th class="blueFineTh" width="5%">N°</th>
<th class="blueFineTh" width="80%">Choix</th>
<th class="blueFineTh" width="15%">Action</th>
</tr>
</table><br clear="all"/>
<input type="hidden" name="qcmnum" value="" disabled="disabled"/>
<input type="hidden" name="qcmcompt" value="" disabled="disabled"/>
<input type="button" class="button" value="Ajouter" onClick="AddLine();"/>
</span>
</div>
</div>
<div class="frmrow">
<span class="frmlabel">Autorisations participants:</span>
<span class="frmfill">
<input name="tpl_autharg" id="tpl_autharg" type="checkbox" checked="checked"/>
Permettre aux participants d'argumenter les QCM<br/>
<input name="tpl_authanxfile" type="checkbox" checked="checked"/>
Permettre aux participants de joindre un fichier
</span>
</div>
<div class="frmrow">
<span class="frmlabel">Fichier <br />(10 Mo max.) :</span>
<span>
<input name="tpl_coq_filename" type="file" size="42"/>
</span>
</div>
<div class="spacer"> </div>
<div style="width: 492px; margin: 0px auto;" align="right">
<input type="button" class="button" onclick="Reset('frmCoq');" value="Réinitialiser" />
<input type="submit" class="button" name="upd" value="Enregistrer"/>
</div>
</form>
</div>
</div>
<div id="footerZone">
</div>
</div>
</body>
</html>
=======================================================================
FICHIER JS (coqUtils.js) :
==================
//=================================
//DEFINITION DES VARIABLES GLOBALES
//=================================
var tableau;
//===============================
//AJOUT DES EVENTLISTENER ONLOAD
//===============================
if(typeof window.addEventListener != 'undefined') //.. gecko, safari, konqueror and standard
window.addEventListener('load', Init, false);
else if(typeof document.addEventListener != 'undefined') //.. opera 7
document.addEventListener('load', Init, false);
else if(typeof window.attachEvent != 'undefined') //.. win/ie
window.attachEvent('onload', Init);
//==========================
//FONCTION D'INITIALISATIONS
//==========================
function Init()
{
//Placer ici toutes les fonctions devant être executées au chargement
InitTabQcm();
}
//======================================================
function InitTabQcm()//Initialisation du tableau des Qcm
//======================================================
{
tableau=ElemByID('tabQcm');
ElemByID('qcmcompt').value=tableau.rows.length;
if (ElemByID('tpl_shwfrmquest').value=="yes"){
ElemByID('frmQuest').style.display='block';
}
ShowFrmQcm('tpl_anstyp', 'frmQcm');
}
//==================================================
function ElemByID(id)//==Retourne un objet valide==
//==================================================
{
if (document.getElementById) {
return document.getElementById(id);
} else if(document.all) {
return document.all(id);
} else if (document.layers) {
return document.layers[id];
}
else {
return null;
}
}
//========================================
function CreateElementWithName(type, name)
//========================================
{
var element;
// First try the IE way; if this fails then use the standard way
if (document.all) {
element = document.createElement('< '+type+' name="'+name+'" />');
}
else {
element = document.createElement(type);
element.setAttribute('name', name);
}
return element;
}
//=====================================================
function Reset(frm_id)//==Afficher/Masquer un <div>==
//=====================================================
{
//remise à zero du form
ElemByID(frm_id).reset();
//Masquage du div qcm si besoin
ShowFrmQcm('tpl_anstyp', 'frmQcm');
//supression des lignes ajoutées par l'utilisateur
for (var i=1; i<tableau.rows.length;i++)
{
//var arr = tableau.rows[i].cells[1].getElementsByTagName("input");
//alert("i="+i+", length="+tableau.rows.length+", arr[0].value="+arr[0].value);
var dyn = tableau.rows[i].cells[0].getElementsByTagName('input');
if(dyn.length>0)
{
//Affectation du champ caché comportant le n° de ligne cible
ElemByID("qcmnum").value=i;
//Suppression de la ligne cible
DeleteRow(false);
//Décrémentation du compteur suite à la suppression de ligne
i=i-1;
}
}
}
//=====================================================
function Show(id, value)//==Afficher/Masquer un <div>==
//=====================================================
{
ElemByID(id).style.display=value;
}
//===========================================================
function ShowFrmQcm(selId, frmId)//==Afficher/Masquer les qcm
//===========================================================
{
var i = 0;
if (ElemByID(selId).value==1) {
ElemByID(frmId).style.display='none';
ElemByID('tpl_autharg').style.display='none';
}
else if(ElemByID(selId).value==2 || ElemByID(selId).value==3){
ElemByID(frmId).style.display='block';
ElemByID('tpl_autharg').style.display='inline';
}
}
//=============================================================
function AddLine() //== ajout d'une ligne
//=============================================================
{
//On autorise 100 qcm max
if(tableau.rows.length==101) {
return;
}
//Declaration des variables
//var timestamp = Math.floor((new Date()).getTime() / 1000);
var rownum = tableau.rows.length;
var row = tableau.insertRow(rownum);
var compt = Number(ElemByID("qcmcompt").value)+1;
//Affectation du compteur de lignes créées y compris celles supprimées
ElemByID("qcmcompt").value = compt;
//Affecter la classe à la ligne
row.setAttribute("className","blueFineTr");//IE
row.setAttribute("class","blueFineTr");//FF
//Ajouter les cellules
for (var cellpos=0;cellpos<tableau.rows[0].cells.length;cellpos++)
{
var cell = row.insertCell(cellpos);
cell.setAttribute("className", "blueFineTd");//IE
cell.setAttribute("class", "blueFineTd");//FF
switch (cellpos)
{
case 0 :
//Ajout du numéro de ligne à la 1ère cellule
cell.innerHTML=rownum;
var input = window.document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('id', "inpQcmd_"+compt);
input.setAttribute('value', 'dyn');
cell.appendChild(input);
break;
case 1 :
//Ajout de l'input réponse
var input = window.document.createElement('input');
input.setAttribute("type", "text");
input.setAttribute("id", "inpQcm_"+compt);
input.setAttribute("size", 45);
input.setAttribute("name", "tpl_coq_qcmtext[]");
input.setAttribute("value", "");
input.setAttribute("maxLength", 255);
cell.appendChild(input);
break;
case 2 :
//Ajout du bouton descendre
var span1 = document.createElement('span');
var img1 = document.createElement('img');
img1.setAttribute("id", "dwnQcm_"+compt);
img1.setAttribute("src", "/images/down.bmp");
img1.setAttribute("alt", "Descendre");
span1.appendChild(img1);
cell.appendChild(span1);
ElemByID("dwnQcm_"+compt).onclick = function(){MoveRow(1);}
//Ajout du bouton Monter
var span2 = document.createElement('span');
var img2 = document.createElement('img');
img2.setAttribute("id", "upQcm_"+compt);
img2.setAttribute("src", "/images/up.bmp");
img2.setAttribute("alt", "Monter");
span2.appendChild(img2);
cell.appendChild(span2);
ElemByID("upQcm_"+compt).onclick = function(){MoveRow(-1);}
//Ajout du bouton supprimer
var span = document.createElement('span');
var img = document.createElement('img');
img.setAttribute("id", "delQcm_"+compt);
img.setAttribute("src", "/images/delete_red.png");
img.setAttribute("alt", "Supprimer");
span.appendChild(img);
cell.appendChild(span);
//Ajout d'un listener onclcik à l'image
ElemByID("delQcm_"+compt).onclick = function(){DeleteRow(true);}
break;
}
}
//Ajout d'un listener onmousedown à la nouvelle ligne
tableau.rows[rownum].onmousedown = function(row){ChosedLine(this);}
ElemByID("inpQcm_"+compt).focus();
}
//===================================================
function ChosedLine(lig) //== choix d'une ligne ==
//===================================================
{
ElemByID("qcmnum").value=lig.rowIndex;
Select();
}
//========================================================
function Select() //== marquer la ligne
//========================================================
{
for (var l=1;l<tableau.rows.length;l++) {
for (var c=1;c<tableau.rows[l].cells.length;c++) {
if (l==Number(ElemByID("qcmnum").value)){
tableau.rows[l].cells[c].style.backgroundColor="#EAC103";
}
else {
tableau.rows[l].cells[c].style.backgroundColor="#FFFFFF";
}
}
}
}
//===========================================
function DeleteRow(conf) //== suppression ==
//===========================================
{
//affichage du message de confirmation
if(conf==true){
if (!confirm("Confirmez-vous la suppression de cette ligne ?")){
return;
}
}
//Suppression de la ligne
tableau.deleteRow(Number(ElemByID("qcmnum").value));
//Renumérotation des lignes
for (var i=1; i<tableau.rows.length;i++) {
tableau.rows[i].cells[0].innerHTML=i;
}
//Remise à blanc de l'index qui a été positionné sur cette ligne par les onmousedown
ElemByID("qcmnum").value="";
}
//=============================================
function MoveRow(way)
//=============================================
{
//Assigation de la ligne à déplacer
var rowToMove=tableau.rows[ElemByID("qcmnum").value];
var newIndex = 0; //Index de destination avant suppression du rowToMove
var finalIndex = 0; //Index de destination après suppression du rowToMove
var delIndex =0; //Index de la ligne à déplacer, à supprimer après insert
if(way==1){
newIndex = rowToMove.rowIndex+way+1;
finalIndex = newIndex-1;
delIndex = rowToMove.rowIndex;
}
else if(way==-1) {
newIndex = rowToMove.rowIndex+way;
finalIndex = newIndex;
}
//Interdiction de remplacer la ligne de titre et de descendre la dernière ligne
if ((newIndex==0) || (way==1 && rowToMove.rowIndex+1==tableau.rows.length)){return;}
//Insertion d'une nouvelle ligne pour y copier celle à déplacer
var newRow = tableau.insertRow(newIndex);
newRow.setAttribute("className", "blueFineTd");//IE
newRow.setAttribute("class", "blueFineTd");//FF
//Copie des cellules de la ligne courante à la ligne cible
for (var i=0; i<rowToMove.cells.length; i++){
var oldCell = rowToMove.cells[i];
var newCell = document.createElement("td");
newCell.setAttribute("className", "blueFineTd");//IE
newCell.setAttribute("class", "blueFineTd");//FF
newCell.innerHTML = oldCell.innerHTML;
//Récupération de l'indice des id de la ligne pour réaffectation des listener
if(i==1) {
var inputs = newCell.getElementsByTagName("input");
var inputID = inputs[0].getAttribute("id");
var compt = inputID.substring(inputID.indexOf("_", 0)+1, inputID.length);
//Correction de bug : la copie de cellule ne copie pas l'attribut name !
inputs[0].setAttribute("name", "tpl_coq_qcmtext[]");
}
newRow.appendChild(newCell);
}
//Suppression de la ligne qui a été dupliquée
tableau.deleteRow(rowToMove.rowIndex);
//Ajout des listener
tableau.rows[finalIndex].onmousedown = function(newRow){ChosedLine(this);}
ElemByID("dwnQcm_"+compt).onclick=function(){MoveRow(1);}
ElemByID("upQcm_"+compt).onclick=function(){MoveRow(-1);}
ElemByID("delQcm_"+compt).onclick = function(){DeleteRow(true);}
//Renumérotation des lignes
for (var i=1; i<tableau.rows.length;i++){
tableau.rows[i].cells[0].innerHTML=i;
}
}
=======================================================================
FICHIER JS (siystylesheet.css) :
======================
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color: #CCCCCC;
padding: 5px;
margin: 0px;
text-align: center;
}
#page {
width: 1000px;
margin: 0px;
background-color: #FFFFFF;
padding: 0px;
}
#site {
position: absolute;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
#leftZone {
margin: 3px;
padding: 0px;
float: left;
width: 150px;
height: 720px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #666666;
}
#rightZone {
float: right;
height: 720px;
width: 190px;
margin: 3px;
padding: 0px;
border-left-width: 1px;
border-left-color: #666666;
border-left-style: solid;
}
#topPage {
width: 991px;
background-color: #666666;
border: 1px solid #0A276F;
margin: 0px;
height: 115px;
text-align: left;
padding: 2px;
}
#footerZone {
width: 1000px;
background-color: #333333;
}
#content {
width: 600px;
margin-left: 10px;
margin-top: 3px;
text-align: left;
display: inline-table;
}
#content a {
text-decoration: none;
color: #0A276F;
}
#content a:visited {
color: #0A276F;
}
#identification {
font-size: 12px;
margin: 0px;
padding: 0px;
float: right;
color: #CCCCCC;
}
#identification table {
text-align: right;
font-size: 12px;
margin: 0px;
padding: 0px;
}
#page a:visited {
color: #0A276F;
}
a {
color:#000000;
text-decoration:none;
text-transform:none;
}
h1 {
text-decoration: none;
}
h2 {
font-size: 20px;
color: #EAC103;
}
h1, h2, h3, h4, div, p {
margin: 0px;
}
h3 {
font-size: 1.1em;
margin-top: 0.8em;
color: #EAC103;
}
h4 {
font-size: 13px;
}
.butText {
margin: 0px;
padding: 0px;
float: right;
display: inline;
}
#footerZone {
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #A5D663;
border-bottom-color: #A5D663;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
color: #0A276F;
margin-top: 8px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#footerZone a {
color: #0A276F;
}
#footerZone a:visited {
color: #0A276F;
}
.blueFineTable {
border: 1px solid #0A276F;
border-collapse:collapse;
}
.blueFineTd {
border: 1px solid #0A276F;
overflow: auto;
}
.blueFineTh {
background-color: #68799A;
border: 1px solid #0A276F;
text-align: left;
}
.txtDisabled {
background-color: #CCCCCC;
border: 1px solid #333333;
}
.blueFineTr {
cursor: pointer;
}
.blueFineTrHover {
background-color: #C4E1E1;
cursor: pointer;
}
.red {
color: #FF0000;
}
.button {
color : #000000;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
text-indent : 2px;
border: 1px solid #000000;
}
.message {
color: #FF0000;
background-color: #CCCCCC;
text-align: left;
border: 1px dashed #333333;
filter: Light;
padding: 3px;
}
#sitepath a {
font-size: 9px;
color: #333333;
}
#sitepath a:visited {
font-size: 9px;
color: #333333;
}
div.frmrow {
clear: both;
padding-top: 5px;
}
div.frmrow span.frmlabel {
float: left;
width: 150px;
text-align: left;
}
div.frmrow span.frmfill {
float: right;
width: 400px;
text-align: left;
}
div.spacer {
clear: both;
}
/****************************/
/* début menu déroulant */
/****************************/
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 107px;
left: 9px;
width: 100%; /* correction pour Opera */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
}
#menu ul, li {
list-style-type:none;
margin-right: 0px;
margin-left: 0px;
}
/*chaque sous-menu*/
#menu ul li {
position:relative;
float:left;
width:98px;
cursor:pointer;
display:block;
height:13px;
background-color: #ccc;
background-image: none;
margin-right: 1px;
}
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
width:196px;
border:1px solid #333333;
border-top:none;
top:13px;
left:0px;
}
#menu ul li ul li {
height:100%;
width:100%;
}
#menu ul li ul li a {
color: #333333;
font-size:10px;
font-weight:normal;
display:block;
height:100%;
border-top:1px solid #333333;
}
#menu ul li a {
display:block;
height:100%;
}
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover, ul li a:hover {
color: #333333;
background:#FF6600;
}
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
left:196px;
}
#menu a:visited {
color: #333333;
}
#headerpub {
background-color: #000000;
border: 1px solid #999999;
margin: 0px;
height: 70px;
width: 600px;
}