gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 17:21:46 25 4
gpt4 key购买 nike

您好,我正在尝试生成带有文本框的动态 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>

剩下的就像您为名称所做的一样。

关于php - 如何为动态创建的元素分配唯一 ID - Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12191013/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com