Petit tableau editable

Version imprimable

Je cherche à afficher un tableau dont les cellules
deviennent éditables quand on clique dessus.
exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <table id="listEdit"> <tr id="record[1]"> <td type="text">texte 1</td> <td type="int">chiffre 1</td> <td type="date">date 1</td> </tr> <tr id="record[2]"> <td type="text">texte 2</td> <td type="int">chiffre 2</td> <td type="date">date 2</td> </tr> </table>
J'imagine un petit script prototype qui surveille
toutes les cellules du tableau listEdit et qui, au click
transforme le contenu de la cellule en <input />

Quelqu'un aurait-il une suggestion ou un lien vers un exemple ?

12/12/2008, 12h48
le_chomeur

salut :)

http://www.java2s.com/Code/JavaScrip...etablecell.htm

j'ai déja proposé ce code ci sur le forum :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
 
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Nouvelle page 1</title>
<style type="text/css">td, #saisie  { width: 100px; font-family: verdana; font-size: 12px; line-height: 20px; 
               border: 1px solid black }
#saisie      { color: red }
html body    { margin: 0 }
</style>
 
<script type='text/javascript'>
 var currentCell
function edit(Obj){
  currentCell=Obj; 
  var editbox=document.getElementById('saisie')
  editbox.style.top=currentCell.offsetTop+'px';
  editbox.style.left=currentCell.offsetLeft+'px';
  editbox.style.width=currentCell.offsetWidth+'px';
  editbox.style.height=currentCell.offsetHeight+'px';
  editbox.style.fontSize=currentCell.style.fontSize;
  editbox.style.display='';
  if (!document.all){editbox.style.paddingTop='4px'};
  editbox.value=(currentCell.innerHTML!="&nbsp;")?currentCell.innerHTML.replace:'';
  editbox.focus();
  editbox.value=editbox.value
  }
 
 
function editSelect(Obj1){
  editsel.style.width=currentCell.offsetWidth+'px';
  editsel.style.height=currentCell.offsetHeight+'px';
  var LesOptions=Obj1.getAttribute("ArrayOpt").split(';');
  while(editsel.options.length>1){editsel.removeChild(editsel.options[editsel.options.length-1])}
  editsel.style.top=currentCell.offsetTop+'px';
  editsel.style.left=currentCell.offsetLeft+'px';
  editsel.style.fontSize=currentCell.style.fontSize;
  editsel.style.visibility="visible";
 
  for(i=0;LesOptions[i];i++){
      var newOpt=document.createElement('option');
      newOpt.value=LesOptions[i];
      newOpt.innerHTML=LesOptions[i];
      if(newOpt.innerHTML==currentCell.innerHTML){newOpt.selected='selected';}
      editsel.appendChild(newOpt);
      }
   editsel.focus();   
  }  
 
function copyValue(Box){
 
TransValue="";
switch(Box.id){
  case "saisie" :   TransValue=(Box.value.length>0)?Box.value:"&nbsp;";
						Box.value=""
						Box.style.display='none';
						break;
  case "MySel":     TransValue=(Box.options.selectedIndex==-1)?"&nbsp;":Box.options[Box.selectedIndex].value;
						Box.style.top=0;
						Box.style.left=0;
						Box.style.visibility='hidden';	
						break;
						}
currentCell.innerHTML=TransValue;
}
 
 
function Myinit(){
    var TabTr=document.getElementsByTagName('tr');
 
    for(i=0;TabTr[i];i++){
          var TabTd=TabTr[i].getElementsByTagName('td');
	       for(j=0;TabTd[j];j++){ 
	       				TabTd[j].id="Cell"+i+"_"+j;
	       				if(j==3){TabTd[j].onclick=function(){currentCell=this;
	       															editSelect(this)};
	       				                                      }
	       				else{TabTd[j].onclick=function(){edit(this)}}
				          }
   }
editsel=document.getElementById('MySel');				          
 }     
window.onResize=function(){alert('coucou');}
 </script>    
 
</head>
 
<body onload="Myinit()">
 
<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td arrayopt="S;E;L">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td arrayopt="Bonjour;Aurevoir;coucou; salut">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td arrayopt="Banane;Oranges;Kiwi;fraises">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td arrayopt="chocolat;vanille;menthe;café;grenadine">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td arrayopt="rouge;vert;bleu;noir;jaune;marron;taupe;violet;blanc;saumon">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td arrayopt="Bonjour;Aurevoir;coucou; salut"></td>
    <td></td>
    <td></td>
  </tr>
</table>
<input type="text" style="position:absolute;display:none;top:0;left:0;width:150px;" id="saisie" onblur="copyValue(this)" value / size="20">
<select id="MySel" name="hello" style="position:absolute;visibility:hidden;top:0;left:0;width:150px;" onblur="copyValue(this)">
  <option value="&nbsp;">-selectionnez</option>
</select>
 
</body>

Salut,

Avec JQuery, voici un début à développer.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
$(function(){
  $('#listEdit td').click(function() {
    if($('input', $(this)).length) return;
    var cell = $(this);
    var edit = $("<input type='text' />").attr('value', cell.text());
    cell.empty();
    edit.keypress(function(event) {
  	if(event.which==13) cell.html($(this).attr('value'));
    }).appendTo(cell).focus();
  });
});

sinon une recherche sur google avec "In place editor"

12/12/2008, 14h17
SpaceFrog

LOL
il a dit petit tableau ...

Prendre JQuery pour ça c'est un peu comme prendre une tronçonneuse pour tartiner des canapés ...
12/12/2008, 14h29
marcha

Citation:

Envoyé par SpaceFrog

LOL
il a dit petit tableau ...

Parce que la technologie à utiliser dépend de la taille du tableau ? bravo spafy :)

Citation:

Envoyé par SpaceFrog

Prendre JQuery pour ça c'est un peu comme prendre une tronçonneuse pour tartiner des canapés ...

JQuery pèse 54k et permet d'économiser facilement son poids lors du développement.
12/12/2008, 14h40
SpaceFrog

Citation:

Parce que la technologie à utiliser dépend de la taille du tableau ?

lol c'est vrai que ça porte à confusion ...
En fait je ne suis pas partisan d'utiliser un framework complet pour n'utiliser qu'une seule fonctionnalité ...
Maintenant si à coté il a besoin d'autres fonctionnalités, pourquoi pas ...

en l'occurrence le script proposé fais 3Ko sans avoir été optimisé ...
12/12/2008, 14h56
marcha

Tout à fait d'accord SpaceFrog, j'ai pas dit qu'il fallait utiliser JQuery.
ton code est tout à fait pertinant.

Citation:

Envoyé par SpaceFrog

En fait je ne suis pas particant d'utiliser un framework complet pour n'utiliser qu'une seule fonctionalité ...

Moi aussi, cela dépend du reste de l'application on est d'accord. Notons tout
de même que JQuery offre une base relativement légère et que le gros de
ses fonctionnalités est sous forme d'extensions dont on ne charge que ce
que l'on a besoin.
12/12/2008, 15h01
le_chomeur

moi je dis on vote !
quelle est la différence entre un sapin ?

une librairie doit être utilisée a bon escient , lors d'un projet , et non pas de façon ponctuelle comme indiqué , tu irais acheter une moissonneuse batteuse pour arracher les 3 mauvaise herbes d'un jardin de 5m2 ? non tu irais avec tes mimines et bine la c'est pareil on utilise ses mimines pour coder une ptite fonction tout légère ^^

On les aura spaffy on les aura eux et leur librairies du diable ;)
12/12/2008, 15h14
Glideh

Merci pour vos réponses.
J'ai oublié de préciser que je travaille sur un outil qui intègre déjà Prototype.
En l'occurrence vTiger (dont je trouve le code exceptionnellement dégueulasse d'ailleurs)