Le select de base html ne permet pas une mise en forme du type msflexgrid du visual basic avec se code on peut emuler cette fonction, qui peut servir pour faire de formulaires de type bon de commande. Cet un code basic, qui peut être derivé facilement. Il n'a pas d'autre ambition que de fournir une solution clef en main. Attention ce code est uniquement testé et developpé pour IE !
Source / Exemple :
<html>
<head>
<title>Idem MSFEXGRID Visual BASIC</title>
<script>
/* Auteur CC */
/*
fonction de selection multicolonne
toutes les colonne d'une même ligne sont selectionnée par 1 clic
et deselectionnés si deja selectionnés
function selectFast(idname){
var ta = document.getElementById(idname+".a");
var tb = document.getElementById(idname+".b");
if ( ta.style.background == "#0000ff" ) {
ta.style.background = "#ffffff";
ta.style.color = "#000000";
tb.style.background = "#ffffff";
tb.style.color = "#000000";
} else {
ta.style.background = "#0000ff";
ta.style.color = "#ffffff";
tb.style.background = "#0000ff";
tb.style.color = "#ffffff";
}
}
/*
fonction de transfert d'un table à l'autre on peut sans doute améliorer cette partie de code
je ne suis pas un super pro du javascript, la idem avec les identifiants on passe d'une table à l'autre
function AddFast() {
var j=0;
var lines = 100; // suivant votre tableau d'entrée
for (var i=0; i<lines; i++){
var ta = document.getElementById("t"+i+".a");
if ( ta.style.background == "#0000ff" ) {
id = "m"+j+".z";
m = document.getElementById(id);
document.all[id].innerHTML = j;
id = "m"+j+".q";
m = document.getElementById(id);
m.disabled = false;
m.value = "1";
m.focus();
idm = "m"+j+".a";
m = document.getElementById(id);
idt = "t"+i+".a";
v = document.getElementById(id);
document.all[idm].innerHTML = document.all[idt].innerHTML;
idm = "m"+j+".b";
m = document.getElementById(id);
idt = "t"+i+".b";
v = document.getElementById(id);
document.all[idm].innerHTML = document.all[idt].innerHTML;
j++;
}
}
}
function Clear() {
var j=0;
var lines = 100;
for (var i=0; i<lines; i++){
id = "m"+j+".z";
m = document.getElementById(id);
if ( document.all[id].innerHTML != " " ) {
id = "m"+j+".z";
m = document.getElementById(id);
document.all[id].innerHTML = " ";
id = "m"+j+".q";
m = document.getElementById(id);
m.value = "";
m.disabled = true;
idm = "m"+j+".a";
m = document.getElementById(id);
idt = "t"+i+".a";
v = document.getElementById(id);
document.all[idm].innerHTML = " ";
idm = "m"+j+".b";
m = document.getElementById(id);
idt = "t"+i+".b";
v = document.getElementById(id);
document.all[idm].innerHTML = " ";
j++;
}
}
}
</script>
</head>
<BODY>
<table width=926 border=0>
<tr>
<td width="487">
<TABLE ALIGN=left BORDER=1 width=101% CELLPADDING=5>
<th bgcolor="#9AA2AF" align=center width="146">Reference</th>
<th bgcolor="#9AA2AF" align=center width="262">Designation</th>
<th bgcolor="#9AA2AF" align=center width="3"> </th>
</table>
</td>
<td width="91"> </td>
<td width="332">
<table align=left border=1 width=100% cellpadding=5>
<!-- les libellés des colonnes | columms label -->
<th bgcolor="#9AA2AF" align=center width="150">index</th>
<th bgcolor="#9AA2AF" align=center width="100">Quantité</th>
<th bgcolor="#9AA2AF" align=center width="100">Designation</th>
<th bgcolor="#9AA2AF" align=center width="200">Reference</th>
<th bgcolor="#9AA2AF" align=center width="10"> </th>
</table>
</td>
</tr>
<tr>
<td width="487">
<div style="width:100%; overflow:auto;height:200Px;">
<TABLE ALIGN=left BORDER=1 width=100% CELLPADDING=5>
<script>
/*
creation dynamique de la table de référence ->
vous pouvez créer autant de colonnes que vous le souhaitez
le tout est de leur donner un id différant
for (i=0;i<100;i++){
document.write("<TR>");
var str = "";
str = "<a onclick='selectFast(\"t" + i + "\")'>"
str += "<td width=\"120\" id=\"t" + i + ".a" + "\">article " + i + "</TD>"
str += "<td width=\"220\" id=\"t" + i + ".b" + "\">value " + i + "</TD>";
document.write(str);
document.write("</a></TR>");
}
</script>
</TABLE>
</div>
</td>
<td width="91"> </td>
<td width="332">
<div style="width:100%; overflow:auto;height:200Px;">
<table align=left border=1 width=100% cellpadding=5>
<script>
/* création de la table receptrice
même principe, avec en plus des champs index et quantité
for (i=0;i<100;i++){
document.write("<TR>");
var str = "";
str = "<TD width=200 id=\"m" + i + ".z" + "\"> <td>";
document.write(str);
str = "<TD><input size=5 STYLE=\"text-align: right;\" type=\"text\" id=\"m" + i + ".q\" name=\"m" + i + ".q\" DISABLED><td>";
document.write(str);
str = "<TD width=200 id=\"m" + i + ".a" + "\"> <td>";
document.write(str);
str = "<TD width=200 id=\"m" + i + ".b" + "\"> <td>";
document.write(str);
document.write("</TR>");
}
</script>
</table>
</div>
</td>
</tr>
<tr>
<td>
<input id=bouton1 onClick="AddFast();" type=button value="Add" name="button">
</td>
<td>
</td>
<td valign="top">
<input id=bouton2 onClick="Clear();" type=button name="Clear" value="clear">
</td>
</table>
<tr width=300>
<td width=300> </td>
</tr>
</body>
</html>
Conclusion :
pour la mise en forme des colonnes je ne me suis pas foulé, mais ce n'est qu'un example.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.