1

单击任意行的文本，TEXTAREA 会出现“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>
4

3 回答 3

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;
于 2013-03-29T12:32:10.217 回答
1

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

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

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

于 2013-03-29T12:36:35.267 回答
0 
if (document.getElementById && document.createElement) {
    var butt = document.createElement('BUTTON');
    var buttext = document.createTextNode('Ready!');
    butt.appendChild(buttext);
    butt.onclick = saveEdit;
}

相应地更新此代码，它是使用 Ready! 创建一个新元素（按钮）！文本。

于 2013-03-29T12:34:31.440 回答