转换表格单元格文本框使用jQuery

Question

所以我有一个表，如下图所示：

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

你们得到的图片。所以现在，那个漂亮的小跨度，我已经绑定到这个点击事件：

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

获得警报，它工作正常。但是，我不想提醒，我希望绑定的方法可以更改value列中的所有单元格，使其成为充满其值的文本框，以便用户可以编辑它们。

我该怎么做？

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

你甚至都不需要使用Javascript/jQuery的：

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

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

...只是使用CSS样式输入看起来像一个跨度。