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"