CRÉER UNE LISTBOX À PLUSIEURS COLONNES À PARTIR D'UNE BALISE SELECT

Commentaire de iubito le 05/04/2004 09:15:18

BRAVO!
ça marche sur IE6, Mozilla, Opéra !
ça mérite un bon 10/10 ;)

juste un truc, mais c'est lié au couleurs je pense, quand on a cliqué sur un élément, qui devient bleu, puis qu'on repasse la souris dessus, on a du blanc sur fond blanc (sur les 3 navigateurs).

Commentaire de iubito le 05/04/2004 12:57:26

oups ouais j'avé oublié de mettre la note :-p
pour NS, chépa, depuis qu'il y a mozilla, ns est bien un peu cuit !

Commentaire de OuPinaise le 03/06/2004 10:53:31

bonjour, ça ma l'air pas mal du tout, mais je n'ai pas l'impression que ça puisse marcher si on veut une liste à sélection multiple.
Je me trompe ?

Malheureusement j'ai besoin d'un script comme le tien mais j'ai aussi besoin de ppouvoir choisir plusieurs lignes

Commentaire de OuPinaise le 03/06/2004 12:40:23

Ca serait sympa, mais bon s'il fait beau ne te gache pas la journée pour moi ;o)

Commentaire de OuPinaise le 08/06/2004 15:55:44

Merci man, je teste dès que j'ai le temps.

Commentaire de DoudouBidou le 08/06/2004 21:51:45

de quoi qui est trop long? le temps de réaction ?

Commentaire de amosc le 17/08/2004 12:18:03

Re-Salut,

j'ai modifier le code pour que l'on puisse avoir plusieurs select, sans pour autant tout mettre dans une classe ...

(je te consielle quand meme de crée un objet sa pourrai etre trés sympa :p)

voici le code :

var color_selec='#e59b0b';
var color_over='#6699cc';

function trover(tab) {
if (tab.bgColor != color_selec){
tab.bgColor = color_over;
}
tab.style.border = 'thin inset';
tab.style.cursor = 'hand';
}

function trout(tab) {
if (tab.bgColor != color_selec){
tab.bgColor='#ffffff';
}
}

function trclick(tab,name) {
affecter(name)
var ligne=0;
for (i=0;i<alltr.length;i++){
if (alltr[i].sourceIndex==tab.sourceIndex)
ligne=i;
}

if (ligne<nb_obj) {
if ((multiple>0)&&(window.event.ctrlKey==true)){
if (obj.options[ligne].selected == true) {
obj.options[ligne].selected = false;
}
else obj.options[ligne].selected = true;
}

else obj.selectedIndex = ligne;

}
majtab(name);
}

function majtab(name) {
affecter(name)
for (i=0;i<alltr.length;i++)
{
if (obj.options[i].selected == true) {
alltr[i].bgColor=color_selec;
alltr[i].style.color='#ffffff';
}
else {
alltr[i].bgColor='#ffffff';
alltr[i].style.color='#000000';
}
}
}

function listbox(name) {
obj=document.getElementById(name);
obj.style.display='none';
nb_ligne=obj.size;
nb_obj=obj.options.length;
multiple=obj.type.search('multiple');

document.write('&nbsp;<div id="divlistbox'+name+'" style="height:100;overflow:auto;border:thin inset" onselectstart="return false">');
document.write('<table id="listbox'+name+'" border=0 cellspacing=0 cellpadding=0 bgcolor=#ffffff>');
for (i=0;i<nb_obj;i++) {
if(i == 0) document.write('<tr style="font-weight:bold" height=20>');
else document.write('<tr height=20>');
for (n=0;n<obj.options[i].innerHTML.split('|').length;n++) {
document.write('<td class=txtbleusimple>');
document.write(obj.options[i].innerHTML.split('|')[n]);
document.write('</td>');
}
document.write('</tr>');
}
document.write('</table></div>');

document.getElementById('listbox'+name).style.width= parseInt(obj.style.width)-21
document.getElementById('divlistbox'+name).style.width= parseInt(obj.style.width);
document.getElementById('divlistbox'+name).style.height= nb_ligne*20;
alltr = document.getElementById('listbox'+name).getElementsByTagName("tr");

for (i=0;i<alltr.length;i++){
  alltr[i].onmouseover= new Function("trover(this,'"+name+"')");
  alltr[i].onmouseout = new Function("trout(this,'"+name+"')");
  alltr[i].onclick = new Function("trclick(this,'"+name+"')");
}
}

function affecter(name){
obj=document.getElementById(name);
obj.style.display='none';
nb_ligne=obj.size;
nb_obj=obj.options.length;
multiple=obj.type.search('multiple');
alltr = document.getElementById('listbox'+name).getElementsByTagName("tr");
}


@@+

Amos

Commentaire de Steph666 le 18/08/2004 15:22:18

Bonjour,

j'avais modifié ton code pour en faire un objet et pouvoir en créer plusieurs, sur :
http://www.javascriptfr.com/code.aspx?ID=22006
J'aimerais bien des commentaires voire ce que vous en pensez.

Stéph.

Commentaire de amosc le 06/09/2004 12:22:50

Salut,

C'est encore moi ... :p

Pour que le code marche sous les moteur NetScape (mozilla, M.Firefox ...)

Il faut enlever :

if ((multiple>0)&&(window.event.ctrlKey==true)){
if (obj.options[ligne].selected == true) {
obj.options[ligne].selected = false;
}
else obj.options[ligne].selected = true;
}

car Netscape ne comprend pas window.event.ctrlKey

et il faut remplacer tous les [obj].sourceIndex par innerHTML, je ne comprend pas pourquoi il n'arrive pas à lire sourceIndex !!

Pour résourdre se petit bleme, j'ai adopté une ruse j'ai mis innerHTML, et sa marche mais pour eviter des probleme avec des ligne qui aurai le meme contenue, je vous invite a mettre dans le td un id alleatoire (ou l'index de la boucle) ;-)

Voici le nouveau code :


var color_selec='#ebebfb';
var color_over='#ebebf0';

function trover(tab) {

if (tab.bgColor != color_selec){
tab.bgColor = color_over;
}
tab.style.border = 'thin inset';
tab.style.cursor = 'hand';
}

function trout(tab) {
if (tab.bgColor != color_selec){
tab.bgColor='#ffffff';
}
}

function trclick(tab,name) {
affecter(name);
var ligne=0;
for (i=0;i<alltr.length;i++){
if (alltr[i].innerHTML==tab.innerHTML)
ligne=i;
}

if (ligne<nb_obj)
obj.selectedIndex = ligne;

majtab(name);
}

function majtab(name) {
affecter(name);
for (i=0;i<alltr.length;i++)
{
if (obj.options[i].selected == true) {
alltr[i].bgColor=color_selec;
alltr[i].style.color='#ffffff';
}
else {
alltr[i].bgColor='#ffffff';
alltr[i].style.color='#000000';
}
}
}

function listbox(name) {
obj=document.getElementById(name);
obj.style.display='none';
nb_ligne=obj.size;
nb_obj=obj.options.length;
multiple=obj.type.search('multiple');

document.write('<div id="divlistbox'+name+'" style="height:100;overflow:auto;border:thin inset" onselectstart="return false">');
document.write('<table id="listbox'+name+'" border=0 cellspacing=0 cellpadding=0 bgcolor=#ffffff>');
for (i=0;i<nb_obj;i++) {
if(i == 0) document.write('<tr height=20>');
else document.write('<tr height=20>');
for (n=0;n<obj.options[i].innerHTML.split('|').length;n++) {
if(i==0)document.write('<td class=txtbleusimple id="'+i+'">');
else document.write('<td class=txtrougesimple id="'+i+'">');
document.write(obj.options[i].innerHTML.split('|')[n]);
document.write('</td>');
}
document.write('</tr>');
}
document.write('</table></div>');

document.getElementById('listbox'+name).style.width= parseInt(obj.style.width)-21
document.getElementById('divlistbox'+name).style.width= parseInt(obj.style.width);
document.getElementById('divlistbox'+name).style.height= nb_ligne*20;
alltr = document.getElementById('listbox'+name).getElementsByTagName("tr");

for (i=0;i<alltr.length;i++){
  alltr[i].onmouseover= new Function("trover(this,'"+name+"')");
  alltr[i].onmouseout = new Function("trout(this,'"+name+"')");
  alltr[i].onclick = new Function("trclick(this,'"+name+"')");
}
}

function affecter(name){
obj=document.getElementById(name);
obj.style.display='none';
nb_ligne=obj.size;
nb_obj=obj.options.length;
multiple=obj.type.search('multiple');
alltr = document.getElementById('listbox'+name).getElementsByTagName("tr");
}

@+

ps: Vive l'OpenSource ... !!

Commentaire de oluha le 08/02/2005 09:58:15

Super source ! Merci !
J'aimerai savoir, à quoi sert le onChange="test()" dans la page html ?

Commentaire de hexenez le 31/01/2007 16:23:06

Super script ! Merci beaucoup !