Petit tableau editable

**Glideh** · 12/12/2008, 12h18

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**le_chomeur** · 12/12/2008, 12h48

salut

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

**SpaceFrog** · 12/12/2008, 13h09

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**marcha** · 12/12/2008, 14h16

Salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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"

**SpaceFrog** · 12/12/2008, 14h17

LOL
il a dit petit tableau ...

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

**marcha** · 12/12/2008, 14h29

Envoyé par SpaceFrog

LOL
il a dit petit tableau ...

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

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.

**SpaceFrog** · 12/12/2008, 14h40

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é ...

**marcha** · 12/12/2008, 14h56

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

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.

**le_chomeur** · 12/12/2008, 15h01

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

**Glideh** · 12/12/2008, 15h14

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)

Petit tableau editable

JavaScript

Discussions similaires

Partager

Partager