jquery - 使用 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>

现在，这个漂亮的小跨度，我已经绑定(bind)到了这个点击事件:

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

收到警报，效果很好。但是，我不想发出警报，我希望该绑定(bind)方法将 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);
    });
});