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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用JQuery将表格单元格转换为文本框相关的知识,希望对你有一定的参考价值。

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

<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将输入设置为看起来像一个跨度。

以上是关于使用JQuery将表格单元格转换为文本框的主要内容,如果未能解决你的问题,请参考以下文章

将文本字符串转换为电子表格中的公式

如何在表格单元格中放置文本框

如何使用jQuery选择相邻的表格单元格

将现有数字单元格转换为文本

vba中如何将单元格内容强制转换为文本类型?

在EXCEL中如何将日期格式转换,例如把2012/09/01变换成2012-09-01?