使用JQuery将表格单元格转换为文本框 [英] Convert table cells to text-boxes with JQuery

问题描述

所以我有一张表，如下所示：

 < table id =paramsTable> 
< tbody> 
< tr> 
< th>名称< / th> 
< th>值& nbsp;< span style =color：Blue; cursor：pointer; font-size：smaller; ID = editParamValues >编辑< /跨度>< /第> 
< th>类型< / 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'）; 
}）; 
  

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

我会如何做到这一点？

解决方案

点击（函数（）{
$（'tr td：nth-​​child（3）'）。each（function（） {
var html = $（this）.html（）;
var input = $（'< input type =text/>'）;
input.val（html ）;
$（this）.html（input）;
}）;
}）;

So I have a table, shown below:

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

You guys get the picture. So now, that nifty little span, I have binded to this click event:

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

Getting the alert, it works fine. However, I don't want to alert, I want that binded method to change all of the cells that are in the value column to become textboxes filled with whatever their value is, so the user can edit them.

How would I do this?

解决方案

$('#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);
    });
});

这篇关于使用JQuery将表格单元格转换为文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！