как присвоить уникальный идентификатор элементам, которые создаются динамически-Javascript

Question

как присвоить уникальный идентификатор элементам, которые создаются динамически-Javascript

Здравствуйте, я пытаюсь создать динамические дивы с текстовым полем и кнопкой удаления в нем. При отправке формы мне нужны все динамически генерируемые значения текстовых полей, как я могу присвоить уникальный идентификатор элементу textbox. Идентификатор / имя текстового поля должен быть уникальным.. чтобы правильно получить все значения.
Пожалуйста, предложите..

Мой Код:

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

874 3

PHP javascript element dynamic unique

3 ответов:

Comments

Ничего не найдено.

Randy the Dev · Accepted Answer · 2012-09-26 17:13:04

Чтобы ответить на ваш вопрос напрямую, вы можете попробовать:
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
Это создаст текстовое поле с идентификатором textbox0, textbox1, textbox2 и т.д.

Или, для более эффективного варианта, вы можете хранить все текстовые файлы, которые вы создаете в массиве, например:
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];

PoeHaH · Accepted Answer · 2012-08-30 09:27:26

Можно сохранить глобальную переменную count (вне функции divId). Каждый раз, когда вы создаете новый div, вы добавляете 1 к счетчику и используете его в качестве уникального идентификатора для вашего текстового поля.
<script language="javascript">
    var globalcount=0;
    function addRow()
    {
         globalcount++;
         //the rest
    }

</script>
А остальное во многом похоже на то, что вы уже делаете для имени.

Petah · Accepted Answer · 2012-08-30 10:29:47

Эта функция генерирует уникальный идентификатор:
function uniqueId() {
    var uid;
    do {
        uid = 'uid-' + Math.random();
    } while (document.getElementById(uid));
    return uid;
}