Javascript元素名稱更改恢復爲原始

克隆的輸入元素「terminal0」的JavaScript名稱更改在功能結束後不保存和/或恢復爲原始名稱。所有其他名稱/ ID更改都可以使用，但第一個元素名稱更改會在函數完成後恢復。即使是第一個元素「terminal0」ID更改成功。我已經測試並確認名稱更改在函數退出之前通過在其末尾放置警報（cTerm.name）進行工作。任何人都知道爲什麼名稱更改不適用於第一個輸入元素的原因？Javascript元素名稱更改恢復爲原始

<tr id="tr1"> 
<td id="tr1Td0"> 
Terminal <input type="checkbox" name="terminal0" id="terminal0" value="0" onClick="cbUpdate()"> 
<br> 
Imager <input type="checkbox" name="imager0" id="imager0" value="0" onClick="cbUpdate()"> 
</td> 
</tr> 
</tbody> 
</table> 

function addTable() 
{ 
    var gssTable = document.getElementById("gssTable"); 
    var currTables = gssTable.rows[0].cells.length; 
    var selNum = document.getElementById("sNum").value; 
    var tr0 = document.getElementById("tr0"); 
    var tr1 = document.getElementById("tr1"); 
    var br = document.createElement('br'); 

    for(x=currTables; x < selNum; x++) 
    { 
     var tr0Td0 = tr0.insertCell(-1); 
     var setID0 = document.getElementById("setID0"); 
     var cSetID = setID0.cloneNode(true); 
     cSetID.id = "setID" + x; 
     cSetID.name = "setID" + x; 
     tr0Td0.appendChild(cSetID); 

     var tr1Td0 = tr1.insertCell(-1); 
     tr1Td0.innerHTML="Terminal"; 
     var terminal0 = document.getElementById("terminal0"); 
     var cTerm = terminal0.cloneNode(true); 
     cTerm.id = "test" + x; 
     cTerm.name = "test" + x; 
     tr1Td0.appendChild(cTerm); 
     tr1Td0.appendChild(br); 
     tr1Td0.innerHTML = tr1Td0.innerHTML + "Imager" 
     var imager0 = document.getElementById("imager0"); 
     var cImager = imager0.cloneNode(true); 
     cImager.id = "imager" + x; 
     cImager.name = "imager" + x; 
     tr1Td0.appendChild(cImager); 
    } 

    while (currTables > selNum) 
    { 
     tr1.deleteCell(-1); 
     tr0.deleteCell(-1); 

     currTables = currTables - 1; 
    }

來源

2015-05-07 Jimmy Goodson

你能製作一個可執行代碼片段或jsfiddle來演示這個問題嗎？ – Barmar

而不是設置innerHTML，每一次，你可以創建一個文本節點和appendChild它，即'tr1Td0.appendChild（document.createTextNode（「Imager」））' –

我試圖做一個jsfiddle的例子，但我使用因爲它似乎並沒有正確的行事。基本上問題是第一個輸入名稱不會像其他所有內容一樣發生變化，我不知道爲什麼。 –

設置innerHTML會使瀏覽器重新呈現該元素及其內容。由於您在循環中進行每次迭代，因此您可能會導致競爭條件，其中innerHTML尚未更新爲其上的appendChild調用的最新效果。

因此，每次您只需創建一個Text node,createTextNode並添加它，而不是設置innerHTML。

tr1Td0.appendChild(document.createTextNode("Imager"));

來源

2015-05-07 00:41:10

TY @PatrickEvans爲解釋你的原始解決方案爲什麼工作背後的邏輯。這意味着對我很重要。 TYTY –

Javascript元素名稱更改恢復爲原始

回答

相關問題