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替换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修改属性。

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。这是一个有效的demo。

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

要将其恢复，您可以在focusout上使用附加this。

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

3 个答案: