如何为动态创建的元素分配唯一的id-Javascript


how to assign unique id to elements that are created dynamically - Javascript

你好,我正在尝试生成带有文本框和删除按钮的动态div。在表单提交时,我想要所有动态生成的文本框值,如何为文本框元素分配唯一id。文本框的ID/名称应该是唯一的。。以正确获取所有值。请建议。。

我的代码:

<HTML>
<HEAD>
<TITLE> Add/Remove dynamic elements</TITLE>
<SCRIPT language="javascript">
    function addRow(divId) {
        count = 0;
        count++;
        var parentDiv = document.getElementById(divId);
        // create a div dynamically
        var eleDiv = document.createElement("div");
        eleDiv.setAttribute("name", "olddiv");
        eleDiv.setAttribute("id", "olddiv");
         // create a textbox dynamically
        var eleText = document.createElement("input");
        eleText.setAttribute("type", "text");
        eleText.setAttribute("name", 'textbox' + count);
        eleText.setAttribute("id", "textbox");
        // create a delete button dynamically
        var eleBtn = document.createElement("input");
        eleBtn.setAttribute("type", "button");
        eleBtn.setAttribute("value", "delete");
        eleBtn.setAttribute("name", "button");
        eleBtn.setAttribute("id", "button");
        eleBtn.setAttribute("onclick", "deleteRow('button')");
        // append new div to parent div 
        parentDiv.appendChild(eleDiv);
        // append textbox & button to new div 
        eleDiv.appendChild(eleText);
        eleDiv.appendChild(eleBtn);
    }
    function deleteRow(tableID) {
            var div = document.getElementById('olddiv');
            if (div) {
                div.parentNode.removeChild(div);
            }
    }
</SCRIPT>

<form name="objForm" action="test1.php">
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
    <div id="dataTable" width="350px"><INPUT type="text" name="txtData" /></div>
    <input  type="submit" value="Submit"/>
</form>

您可以保留一个全局计数变量(在函数divId之外)。每次创建一个新的div时,都会在计数器中添加1,并将其用作文本框的唯一ID。

<script language="javascript">
    var globalcount=0;
    function addRow()
    {
         globalcount++;
         //the rest
    }
</script>

剩下的就像你已经为这个名字做的一样。

要直接回答您的问题,您可以尝试:

var textboxCount = 0;
/* In your function */
// create a textbox dynamically
var eleText = document.createElement("input");
eleText.setAttribute("type", "text");
eleText.setAttribute("name", 'textbox' + count);
eleText.setAttribute("id", "textbox" + textboxCount);
textboxCount += 1; //Increment the count

这将创建id为textbox0textbox1textbox2等的文本框。

或者,为了更有效的选择,你可以将你创建的所有文本框存储在一个数组中,比如:

var textboxes = new Array();
/* In your function */
// create a textbox dynamically
var eleText = document.createElement("input");
eleText.setAttribute("type", "text");
eleText.setAttribute("name", 'textbox' + count);
textboxes.push(eleText);

现在,您可以不调用e = document.getElementById('textbox4');,而调用e = textboxes[4];

此函数将生成一个唯一的ID:

function uniqueId() {
    var uid;
    do {
        uid = 'uid-' + Math.random();
    } while (document.getElementById(uid));
    return uid;
}