Javascript元素名称更改还原为原始

时间:2015-05-07 00:10:25

标签: javascript dom onchange

克隆输入元素" terminal0"的JavaScript名称更改功能结束后,不保存和/或恢复原始名称。所有其他名称/ ID更改都有效,但第一个元素名称更改在函数完成后恢复。即使是第一个元素" terminal0" id更改成功。我已经测试并确认名称更改在函数退出之前通过在其末尾放置警报(cTerm.name)而起作用。任何人都知道为什么名称更改不适用于第一个输入元素?

<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;
    }

1 个答案:

答案 0 :(得分:0)

设置innerHTML会使浏览器重新呈现该元素及其内容。由于你在循环的每次迭代中都这样做,你可能会导致一个竞争条件,其中innerHTML尚未更新到它上面的appendChild调用的最新效果。

因此,每次只需使用Text node创建createTextNode并附加它,就可以设置innerHTML。

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