如何在 Javascript 中編輯標簽文本

Question

我在 html 中使用 Label 或 Div 任何東西

<label id="userId" class="normalWeight editInfo"></label>

頁面加載時，我將值分配給該 id

document.getElementById('userId').innerHTML = allInfo.details.userId;

當我單擊編輯按鈕時，文本將是可編輯的。 然后我將更改文本並存儲到服務器中。 怎么做這個概念

我想要那樣。 不使用文本框。 是否可以？

Answer 1

標簽的 id 為userName並且您正在搜索userId 。

嘗試

document.getElementById('userName').innerHTML = allInfo.details.userId;

要允許編輯，您應該添加一個隱藏的文本框，當您單擊編輯按鈕時，該文本框將被切換。

將此值分配給負載

document.getElementById('userName_Edit').value = allInfo.details.userId;

然后將其切換為可見，並隱藏標簽。

document.getElementById('userName').style.display = "none";
document.getElementById('userName_Edit').style.display = "block";

Answer 2

您可以使用ajax和contenteditable屬性。
像這樣的東西？

function edit_label () {
    var l = document.getElementById('userID');
    if(this.innerHTML == 'Edit') {
        this.innerHTML = 'Save';//we set the button's value to 'save'
        l.removeAttribute("contentEditable");
    }
    else {
        this.innerHTML = 'Edit';//we set the button's value to 'edit'
        l.setAttribute("contentEditable", false);

        //Here you should use ajax to send the data.
        var data = l.innerHTML;//this will be sent
    }
}
document.getElementById('edit_button').onclick = edit_label;

演示： http : //jsfiddle.net/uwaVL/

你應該在使用它之前學習ajax。
w3schools 中的 Ajax 教程： http : //www.w3schools.com/ajax/default.ASP