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

问题描述 投票:5回答:2

我有一张桌子,如下所示:

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

我该怎么做?

jquery html-table
2个回答
14
投票
$('#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);
    });
});

3
投票

你甚至不需要Javascript / jQuery:

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.