单击时将td更改为文本框,并在用户完成后将文本框更改回td

Question

我正在寻找一种方法,用户可以通过点击它来改变表中的td.我当前的设置是当用户点击某个td时,它应该用一个文本框替换单击的td,该文本框包含点击的td中的文本.然后,当用户点击它之外,或按回车键.它应该将文本框更改回td.

这是我的表:

<table class="table" id="tableCompleted">
    <thead>
        <tr>
            <th>Name</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>No</td>
            <td>No</td>
        </tr>
        <tr>
            <td>Jesse</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
            <td>Yes</td>
        </tr>
        <tr>
            <td>David</td>
            <td>No</td>
            <td>Yes</td>
            <td>No</td>
            <td>No</td>
        </tr>
    </tbody>
</table>

这是我写的脚本,我遇到的问题是,当用户点击某个td时,它会替换掉所有的td,并且我没有想出如何在失去焦点时将其更改回来.我尝试使用按钮,但这更糟糕.此外,来自td的文本不会放在文本框中.

我用它的脚本:

$('td').click(function () {
    $('td').replaceWith(function () {
        return '<input type="text" id="modify" "value="' + $('#Text').val() + '" />';
    });
})

我目前有3个问题,我不知道如何只更改被点击的td,因为所有的td都没有唯一的id或类.当用户完成更改后,我不确定如何更改它.此外,它不会将td的内容放在文本框中.

Answer 1

要引用单击的元素,您可以使用this关键字:

$('td').on('click', function() {
    $(this)...
});

另外,你不应该td用inputa 替换,因为tr元素不能有input子元素.而不是将其删除的的的textContent td和追加的input给它.以下是实现此目的的一种方法:

$('td').on('click', function() {
    var $this = $(this);
    var $input = $('<input>', {
        value: $this.text(),
        type: 'text',
        blur: function() {
           $this.text(this.value);
        },
        keyup: function(e) {
           if (e.which === 13) $input.blur();
        }
    }).appendTo( $this.empty() ).focus();
});

以下是使用上述代码段的演示.

你还有一个更明智的选择:contentEditable财产.

$('td').prop('contentEditable', true);

使用上面的属性浏览器处理编辑.您可以手动将contentEditable标记添加到标记中的目标单元格,也可以使用JavaScript修改属性.