2

こんにちは、テキストボックスと削除ボタンを使用して動的divを生成しようとしています。フォーム送信時に、動的に生成されたすべてのテキストボックス値が必要です。テキストボックス要素に一意のIDを割り当てるにはどうすればよいですか。ID /テキストボックスの名前は、すべての値を正しく取得するために一意である必要があります。plsは提案します。

私のコード：

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

4

3 に答える 3

5

グローバル カウント変数を保持できます (関数 divId の外部)。新しい div を作成するたびに、カウンターに 1 を追加し、それをテキスト ボックスの一意の ID として使用します。

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

</script>

あとは、名前の場合と同じです。

于 2012-08-30T06:27:26.170 に答える
2

質問に直接答えるには、次を試してください。

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などの ID を持つテキスト ボックスが作成されます。

または、より効率的なオプションとして、次のように、作成したすべてのテキスト ボックスを配列に格納することができます。

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

于 2012-08-30T06:28:37.643 に答える
-1

この関数は一意の ID を生成します。

function uniqueId() {
    var uid;
    do {
        uid = 'uid-' + Math.random();
    } while (document.getElementById(uid));
    return uid;
}
于 2012-08-30T06:29:29.807 に答える