使用JQuery将表格单元格转换为文本框

Posted 2021-05-04

我有一张桌子，如下所示：

<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列中的所有单元格更改为填充其值的文本框，以便用户可以编辑它们。

我该怎么做？

答案

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

另一答案

你甚至不需要javascript / jQuery：

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

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

...只需使用CSS将输入设置为看起来像一个跨度。