Bon ...ça continue...
Tout marche nickel sous IE (pour une fois !) ...mais voilà que sous FF ça deconne quand je monte ou descends les lignes du tableau ( si vous essayez le tableau devient visible en choisissant type de réponse "choix unique" ou "choix multiple") :
Il veut pas m'afficher la valeur value de l'input type=text (colonne du milieu du tableau)...alors qu'apparemment elle bien initialisée...dixit les belles alert avant la sortie de la fonction MoveRow()
y'a quelqu'un pour m'aider svp ?
Merci d'avance
Voilà les 3 fichiers fonctionnels sans rien toucher...(juste à recopier) :
FICHIER 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');
//affectation du nombre de lignes à l'input qcmcompt
ElemByID('qcmcompt').value=tableau.rows.length;
//Affichage du tableau si demandé par l'utilisateur
if (ElemByID('tpl_shwfrmquest').value=="yes"){
ElemByID('frmQuest').style.display='block';
}
//Affichage/masquage du formulaire en fonction du type de réponse souhaitée
ShowFrmQcm('tpl_anstyp', 'frmQcm');
}
//==================================================
function ElemByID(id)//==Retourne un objet valide==
//==================================================
{
if (document.getElementById) {
return document.getElementById(id); //IE5+, FF
} else if(document.all) {
return document.all(id);//IE4
} else if (document.layers) {
return document.layers[id];//NS
}
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++){
//on recherche si il y a un input créé dynamiquement dans la 1ère cellule
var dyn = tableau.rows[i].cells[0].getElementsByTagName('input');
if(dyn.length>0){
//Affectation du champ caché comportant le n° de ligne cible et utilisé par DeleteRow
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 + la ligne de titre
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);
//Affectation du row
SetRow(row, rownum, compt);
//Ajout des listener
tableau.rows[rownum].onmousedown = function(row){ChosedLine(this);}
ElemByID("dwnQcm_"+compt).onclick = function(){MoveRow(1);}
ElemByID("upQcm_"+compt).onclick = function(){MoveRow(-1);}
ElemByID("delQcm_"+compt).onclick = function(){DeleteRow(true);}
ElemByID("inpQcm_"+compt).focus();
//Mise à jour du compteur avec la prochaine valeur
ElemByID("qcmcompt").value = compt+1;
}
function SetRow(row, rownum, 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 d'un input hidden pour identifier la ligne comme dynamique
var input = window.document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('id', "inpQcmd_"+compt);
input.setAttribute('value', 'dyn');
cell.appendChild(input);
//Ajout du numéro de ligne
var span = document.createElement('span');
span.setAttribute("id", "spQcm_"+compt);
span.innerHTML=rownum;
cell.appendChild(span);
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);
//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);
//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);
break;
}
}
}
//===================================================
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
RenumberRows();
//Remise à blanc de l'index qui a été positionné sur cette ligne par les onmousedown
ElemByID("qcmnum").value="";
}
//==================================================================
function RenumberRows()//~~Renumérote l'affichage du numéro de ligne
//==================================================================
{
for (var i=1; i<tableau.rows.length;i++) {
var spans = tableau.rows[i].cells[0].getElementsByTagName('span');
if(spans.length>0)
ElemByID(spans[0].getAttribute("id")).innerHTML=i;
}
}
//===============================================
function MoveRow(way)//~~Déplace une de 1/-1 rang
//===============================================
{
//Initialisation des variables
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
var inputs = rowToMove.cells[1].getElementsByTagName("input");
var inputID = inputs[0].getAttribute("id");
var compt = inputID.substring(inputID.indexOf("_", 0)+1, inputID.length);
var qcmtext = ElemByID("inpQcm_"+compt).getAttribute("value");
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);
//Réaffectation de tous les paramètres au nouveau row
SetRow(newRow, newIndex, compt);
//Suppression de la ligne qui a été dupliquée
tableau.deleteRow(rowToMove.rowIndex);
//Ajout d'un listener onmousedown à la nouvelle ligne
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);}
ElemByID("inpQcm_"+compt).focus();
//Réaffectation du texte
ElemByID("inpQcm_"+compt).setAttribute("value", qcmtext);
//Renumérotation des lignes
RenumberRows();
}
===========================================================================
FICHIER 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 siysteelsheet.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;
}