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

Question

我正在寻找一种方法，用户可以通过单击它来更改 table 中的 td。我当前的设置是当用户点击 td 时，它应该用包含来自点击的 td 的文本的文本框替换点击的 td。然后当用户在它外面点击，或者按下回车键。它应该将文本框改回 td。

这是 Table 我有：

<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 或 class。而且我不确定在用户完成更改后如何将其更改回来。此外，它不会将 td 的内容放在文本框中。

Answer 1

您可以使用 this。这是一个有效的 demo.

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

要取回它，您可以在 this 上使用附加 focusout。

Answer 2

此处为纯 javascript 解决方案。另外 jsfiddle demo 打击犯罪:)

(function(){
'use-strict';

var td = document.getElementsByTagName('td');
for(var i=0;i<td.length;i++) {
    td[i].addEventListener('click', change, false);
}

function change() {
    if(this.firstChild.nodeType !== 3) {      
        return;
    }
    var docFrag = document.createDocumentFragment();
    var input = document.createElement('input');
    input.value = this.textContent;
    this.removeChild(this.firstChild);
    docFrag.appendChild(input);
    this.appendChild(docFrag);
}
}());

Answer 3

要引用点击的元素，您可以使用 this 关键字：

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

此外，您不应将 td 替换为 input，因为 tr 元素不能有 input 子元素。而不是删除 td 的 textContent 并向其附加 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();
});

Here is a demo using the above snippet.

你还有一个更明智的选择：contentEditable 属性.

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

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

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

Changing td to textbox when clicked and changing textbox back to td when user is done

javascript

jquery

html-table

replacewith