onclick文本框创建（编辑行）

Question

点击任意一行的文字，TEXTAREA即将推出“Ready！”按钮。

我只需要TEXT框进行编辑而不需要“Ready！”按钮。我们怎么做到这一点？

的JavaScript

var editing = false;
if (document.getElementById && document.createElement) {
    var butt = document.createElement('BUTTON');
    var buttext = document.createTextNode('Ready!');
    butt.appendChild(buttext);
    butt.onclick = saveEdit;
}

function catchIt(e) {
    if (editing) return;
    if (!document.getElementById || !document.createElement) return;
    if (!e) var obj = window.event.srcElement;
    else var obj = e.target;
    while (obj.nodeType != 1) {
        obj = obj.parentNode;
    }
    if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
    while (obj.nodeName != 'TD' && obj.nodeName != 'HTML') {
        obj = obj.parentNode;
    }
    if (obj.nodeName == 'HTML') return;
    var x = obj.innerHTML;
    var y = document.createElement('TEXTAREA');
    var z = obj.parentNode;
    z.insertBefore(y, obj);
    z.insertBefore(butt, obj);
    z.removeChild(obj);
    y.value = x;
    y.focus();
    editing = true;
}

function saveEdit() {
    var area = document.getElementsByTagName('TEXTAREA')[0];
    var y = document.createElement('TD');
    var z = area.parentNode;
    y.innerHTML = area.value;
    z.insertBefore(y, area);
    z.removeChild(area);
    z.removeChild(document.getElementsByTagName('button')[0]);
    editing = false;
}

document.onclick = catchIt;

HTML

<table border=1 class="display">
    <thead>
        <tr class="portlet-section-header results-header">
            <th class="sorting">Operator ID</th>
            <th class="sorting">Status</th>
            <th class="sorting">First Name</th>
            <th class="sorting">Last Name</th>
            <th class="sorting">Email</th>
            <th class="sorting">Role</th>
            <th class="sorting_disabled">Select All
                <br />
                <input type="checkbox" onclick="checkAll(this);" name="check" />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>Test1</td>
            <td>Active</td>
            <td>wsrc</td>
            <td>wsrc</td>
            <td>aa@aa.com</td>
            <td>SE Admin</td>
            <td>
                <input type="checkbox" value="3" onclick="checkAllRev(this);" name="deleteItem" />
            </td>
        </tr>
        <tr class="even">
            <td>Test2</td>
            <td>Inactive</td>
            <td>EAI</td>
            <td>SUBSYSTEM</td>
            <td>aa@aa.com</td>
            <td>API</td>
            <td>
                <input type="checkbox" value="4" onclick="checkAllRev(this);" name="deleteItem" />
            </td>
        </tr>
        <tr class="odd">
            <td>Test3</td>
            <td>Inactive</td>
            <td>Dunning</td>
            <td>Portal</td>
            <td>aa@aa.com</td>
            <td>API</td>
            <td>
                <input type="checkbox" value="5" onclick="checkAllRev(this);" name="deleteItem" />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

只需删除按钮特定代码即可。它甚至在那里说按钮。

var editing = false;

function catchIt(e) {
    if (editing) return;
    if (!document.getElementById || !document.createElement) return;
    if (!e) var obj = window.event.srcElement;
    else var obj = e.target;
    while (obj.nodeType != 1) {
        obj = obj.parentNode;
    }
    if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
    while (obj.nodeName != 'TD' && obj.nodeName != 'HTML') {
        obj = obj.parentNode;
    }
    if (obj.nodeName == 'HTML') return;
    var x = obj.innerHTML;
    var y = document.createElement('TEXTAREA');
    var z = obj.parentNode;
    z.insertBefore(y, obj);
    z.insertBefore(butt, obj);
    z.removeChild(obj);
    y.value = x;
    y.focus();
    editing = true;
    y.onblur = saveEdit;
}

function saveEdit() {
    var area = document.getElementsByTagName('TEXTAREA')[0];
    var y = document.createElement('TD');
    var z = area.parentNode;
    y.innerHTML = area.value;
    z.removeChild(area);
    editing = false;
}

document.onclick = catchIt;

Answer 2

删除按钮很简单。但这导致了一个显而易见的问题：如何保存已编辑的文本。例如，没有按钮，您可以保存onblur：

function catchIt(e) {
    // ...
    y.onblur = saveEdit;
    // ...
}

演示：http://jsfiddle.net/dfsq/XQCFa/

Answer 3

if (document.getElementById && document.createElement) {
    var butt = document.createElement('BUTTON');
    var buttext = document.createTextNode('Ready!');
    butt.appendChild(buttext);
    butt.onclick = saveEdit;
}

相应地更新此代码，它会创建一个带有Ready的新元素（按钮）！文本。