个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我尝试建立一个注册表单。该注册表单为名为“address1”的文本框，其附近有一个名为“Add Address”的按钮。该按钮的功能 - 添加更多地址的文本框。先前地址框附近的按钮更改为“删除”，从而删除地址框和按钮。问题是:我必须按顺序设置文本框 - 1,2,3,... - 我必须更改它们的名称和 ID。例如 - 如果我删除地址框编号 4 (name, id="address4")，那么接下来的所有文本框的名称和 id 应减少 1。我尝试在 for 循环中执行此操作。这很难解释，所以我只给你代码。尝试在你的 VS 中编写例如“document.getElementById("address"+n)”。您会发现，您甚至在获得的列表中看不到可以在点 id 或名称或值之后写入的内容。我意识到这是因为我认为这里面有一个变量。现在是代码:
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript">
var n1 = 1; //counting the buttons and divs. doesn't decrease.
//In another words - it counts the number of calls to Add()
var n3 = 1; //counting the address text fields.
//It being reduced and increased so that it will represent the exact number of text fields
function Add() {
n1++;
n3++;
s1 = "<div id='div" + n1 + "'>";
s1 += "Address <input type='text' name='address" + n3 + "' id='address" + n3 + "' />";
s1 += "<input type='button' name='add" + n1 + "' id='add" + n1 + "' value='Add Branch' onclick='Add();' /><br />";
s1 += "</div>";
var n2 = n1 - 1;
document.getElementById('div' + n2).insertAdjacentHTML('afterEnd', s1);
document.getElementById('add' + n2).onclick = function () { Remove(n2, (n3-1)); };
document.getElementById('add' + n2).value = 'Remove';
}
function Remove(nn1, nn2) { //nn1 - div number to remove. nn2 - the address field number in this div
var parent = document.getElementById('barcode');
var child = document.getElementById('div' + nn1);
parent.removeChild(child);
for (nn2 += 1; nn2 <= n3; nn2++) {
var n2 = nn2 - 1; //nn2 - current address text field. n2 - the new number for the address field
document.getElementById('address' + nn2).setAttribute('name', 'address' + n2);
document.getElementById('address' + nn2).setAttribute('id', 'address' + n2);
document.getElementById('address' + n2).setAttribute('value', 'address' + n2);
// try: document.getElementById('address' + nn2).name='address'+n2. doesn't work (for me)
}
n3--;
}
var check = false;
</script>
</head>
<body>
<form name='barcode' id='barcode' action="" >
<div id='div1'>
Address <input type='text' name='address1' id='address1' />
<input type='button' name='add1' id='add1' value='Add Branch' onclick='Add();' /><br />
</div></form>
</body>
</html>
抱歉造成了困惑:)我在此代码中仅保留了链接到地址字段的内容，并添加了注释。非常感谢!
编辑:我忘记了您没有看到此代码中的错误，因为我已经尝试修复它。在我更改代码之前，它对所有 div、文本字段和添加/删除按钮进行了排序，因此所有现有项目将始终按顺序编号(1、2、3...)。如果您单击两次添加按钮，然后删除第一个地址字段，然后再次单击添加按钮，则可以看到以下代码中的问题。
<html>
<head>
<script type="text/javascript">
var n1 = 1;
function Add() {
n1++;
s1 = "<div id='div" + n1 + "'>";
s1 += "Address <input type='text' name='address" + n1 + "' id='address" + n1 + "' />";
s1 += "<input type='button' name='add" + n1 + "' id='add" + n1 + "' value='Add Branch' onclick='Add()' /><br />";
s1 += "</div>";
var n2 = n1 - 1;
document.getElementById('div' + (n2)).insertAdjacentHTML('afterEnd', s1);
document.getElementById('add' + (n2)).onclick = function () { Remove(n2); };
document.getElementById('add' + (n2)).value = 'Remove';
}
function Remove(n) {
var parent = document.getElementById('barcode');
var child = document.getElementById('div' + n);
parent.removeChild(child);
for (n += 1; n <= n1; n++) {
var n2 = n1 - 1;
document.getElementById('add' + n).onclick = function () { Remove(n2); };
document.getElementById('address' + n).setAttribute('name', 'address' + n2);
document.getElementById('add' + n).setAttribute('name', 'add' + n2);
document.getElementById('address' + n).setAttribute('id', 'address' + n2);
document.getElementById('add' + n).setAttribute('id', 'add' + n2);
document.getElementById('div' + n).setAttribute('id','div' + n2);
}
n1--;
document.getElementById('add' + n1).onclick = function () { Add() };
}
</script>
</head>
<body>
<form name='barcode' id='barcode' action="" >
<div id='div1'>
Address <input type='text' name='address1' id='address1' />
<input type='button' name='add1' id='add1' value='Add Branch' onclick='Add();' /><br />
</div>
</form>
</body>
</html>
最佳答案
我认为您在维护地址顺序方面有点太过努力，而且我没有看到这样做的一般原因(如果您有一个，请将其添加到您的问题中)。
如果您像您一样添加具有唯一索引的输入，它们将始终不同且有序。
您可以执行以下操作:
将事件调用者传递给函数“Add”和“Remove”，您可以在其中对这些元素进行所需的更改。
例如，您的 Remove 函数(您将使用 Remove(this); 调用)将如下所示:
function Remove(callerButton) {
var parent = document.getElementById('barcode');
var child = callerButton.parentNode;
// child is the DIV you want to remove
parent.removeChild(child);
n3--;
}
这样您就不需要执行现在正在执行的所有排序操作。
最后，您可以通过以下方式访问所有剩余元素:
var addresses = document.getElementById("barcode").getElementsByTagName("input");
for(var i = 0; i < addresses.length; i++) {
if(addresses[i].type == "text") {
// I'm printing them in the console, you can do with it whatever you like
// If you want to exclude the one with "Add Branch in front of it you can validate for address+n1
console.log("Element.id : " + addresses[i].id + " - Element.value: "+ addresses[i].value );
}
}
我添加了jsFiddle进行这些更改(添加了一个提交按钮以显示表单中的其余字段)。
看看它是否能解决您的问题。
关于javascript - 姓名、身份证件变更，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17869853/
26
4
0
1、数据脱敏解释 在日常开发需求中会经常遇到数据脱敏处理，比如身份证号、手机号，需要使用*进行部分替换显示。这样能使敏感隐私信息在一定程度上得到保护。那么什么是数据脱敏呢？ 在涉及客户安全数据
1、仿淘宝评论购买记录隐藏部分用户名，以下代码亲测可用。 复制代码 代码如下: function cut_str($string, $sublen, $start = 0, $co
废话不多说了，下面给大家介绍使用正则表达式验证用户名、密码、手机号码、身份证的写法，需要的的朋友参考下吧 ?
废话不多说了，直接给大家贴实现此功能的正则表达式代码了，具体代码如下所示： ?
我正在使用 .NET v5.0.100-preview.8.20417.9、ASP.NET Core Web API 5、Microsoft SQL Server 2019、Entity Framew
我正在使用 .NET v5.0.100-preview.8.20417.9、ASP.NET Core Web API 5、Microsoft SQL Server 2019、Entity Framew
我是一名优秀的程序员,十分优秀！