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

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

提问by Dr. Banana

I'm looking for a way the user can change a td from table by clicking on it. My current setup is when a user clicks on a td, it should replace the clicked td by a textbox which contains the text from the clicked td. Then when the user clicks outside of it, or presses enter. It should change the textbox back to td.

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

This is the Table I have:

这是我的表：

<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>

This is the script I have written, the problem I have is that, when a users clicks on a td it replaces all the td's and I havent figured out how to change it back when it loses focus. I tried using a button but that made it even worse. Also the text from the td doesn't get placed inside the textbox.

这是我编写的脚本，我遇到的问题是，当用户单击 td 时，它会替换所有 td，而我还没有想出如何在失去焦点时将其改回。我尝试使用按钮，但这使情况变得更糟。此外，来自 td 的文本不会放置在文本框内。

The script I used for it:

我用于它的脚本：

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

I Currently have 3 problems with it, Im not sure how to only change the td that is clicked, because all the td don't have a unique id or class. And I'm not sure how to change it back when the user is done changing it. Also It doesn't place the content of the td inside the textbox.

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

回答by undefined

For referring to the clicked element you can use the thiskeyword:

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

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

Also you shouldn't replace the tdwith an input, because a trelement can't have an inputchild. Instead of it remove the textContent of the tdand append an inputto it. Here is one way of implementing this:

此外，你不应该更换td用input的，因为一个tr元素不能有一个input孩子。而不是删除 的 textContenttd并将其附加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.

这是使用上述代码段的演示。

You have also a more sensible option: contentEditableproperty.

您还有一个更明智的选择：contentEditable财产。

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

Using the above property browser handles the editing. You can either manually add a contentEditableto the target cells in your markup or use JavaScript for modifying the attribute.

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

回答by fubbe

Pure javascript solution here. And additionaly jsfiddle demoFight the crime :)

纯javascript解决方案在这里。另外还有jsfiddle演示打击犯罪:)

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

回答by Sachin Nambiar Nalavattanon

You can use this. Here is a working demo.

您可以使用this. 这是一个工作演示。

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

To get it back you can use attach focusouton this.

要取回它，您可以使用 attach focusouton this。