dönüştürme tablosu hücreleri metin kutuları için JQuery

Question

ile

Bu yüzden bir tablo, aşağıda göstermiştir:

<table id="paramsTable"> 
    <tbody> 
     <tr> 
      <th>Name</th> 
      <th>Value&nbsp;<span style="color: Blue; cursor: pointer; font-size: smaller;" id="editParamValues">Edit</span></th> 
      <th>Type</th> 
     </tr> 
     <tr> 
      <td style="display: none;">1372</td> 
      <td>providername</td> 
      <td>BloombergFTP</td> 
      <td>String</td> 
     </tr> 
     <tr> 
      <td style="display: none;">1373</td> 
      <td>RateSetList</td> 
      <td>1020</td> 
      <td>String</td> 
     </tr> 
     <tr> 
      <td style="display: none;">1374</td>    
      <td>BloombergServer</td> 
      <td>CFC105</td> 
      <td>String</td> 
     </tr> 
    </tbody> 
</table> 

Sizler resmi olsun. Şimdi, bu şık küçük açıklık, ben bu click olayı binded adres:

$('#editParamValues').live('click', function() { 
     alert('true'); 
}); 

uyarısı alınıyor, iyi çalışıyor. Ancak, uyarmak istemiyorum, value sütununda bulunan tüm hücrelerin, değeri ne olursa olsun doldurulacak metin kutuları haline gelmesini sağlamak için bağlanan yöntemin olmasını istiyorum, böylece kullanıcı bunları düzenleyebilir.

Bunu nasıl yaparım?

Answer 1

$('#editParamValues').click(function() { 
    $('tr td:nth-child(3)').each(function() { 
     var html = $(this).html(); 
     var input = $('<input type="text" />'); 
     input.val(html); 
     $(this).html(input); 
    }); 
}); 

Answer 2

Hatta JavaScript/jQuery gerekmez:

<table> 
     <tr> 
      <td><input type="text" value="My Thing"></td> 
     </tr> 
    </table> 
input { 
border:none; 

} 
input:active { 
    border:1px solid #000; 
} 

... sadece bir yayılma gibi görünmek girişi CSS kullanarak.