jquery - 如何使用克隆生成 id 并将其放入文本框的值
问题描述
请帮助解决这个问题,每次用户通过按下按钮克隆行时,我都需要增加 id,现在克隆工作正常但是 id = 的问题,我需要为每个克隆生成新的 id 并将其放入文本框“文件”的值中id" 检查代码也在 这里 jsfiddle
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( ".add-row" ).click(function(){
var $clone = $( "ul.personal-details" ).first().clone();
$clone.append( "<button type='button' class='remove-row'>-</button>" );
$clone.insertBefore( ".add-row" );
});
$( ".form-style-9" ).on("click", ".remove-row", function(){
$(this).parent().remove();
});
});
</script>
</head>
<body>
<span class="form-style-9">
<ul class="personal-details">
<table class="stretch" border="0">
<tr>
<td><label for="fname">File ID</label>
<input name="fileid2[]" type="text" class="stretchnights" id="fileid2" value=""></td>
<td>
<label for="fname">First Name</label>
<input name="fname[]" type="text" class="stretch" size="15" maxlength="30" required >
</td>
<td>
<label for="lname">Last Name</label>
<input name="lname[]" type="text" class="stretch" size="15" maxlength="30" required >
</td>
</tr>
</table>
</ul>
<button type="button" class="add-row">+ New Client</button>
<table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
</span>
</body>
</html>
解决方案
第一:使用选择克隆中的输入$clone.find('.stretchnights');
2nd:每次单击 addrow 按钮时将 id 增加一,您需要在单击事件之外设置一个变量var id=0
更改 0 与您需要开始的任何数字
第三:通过使用更改输入ID.attr('id' , newid)
并通过使用更改其值.val(newid)
您可以在一行中完成这两件事
4th:使用完成后将id增加一id++
$(document).ready(function(){
var id = 0; // change 0 to the number you want to start with
$( ".add-row" ).click(function(){
var $clone = $( "ul.personal-details" ).first().clone();
var $input = $clone.find('.stretchnights');
$input.val('fileid'+id).attr('id' , 'fileid'+id) // change fileid with any string you want
$clone.append( "<button type='button' class='remove-row'>-</button>" );
$clone.insertBefore( ".add-row" );
id++; // increase id by 1
});
$( ".form-style-9" ).on("click", ".remove-row", function(){
$(this).parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="form-style-9">
<ul class="personal-details">
<table class="stretch" border="0">
<tr>
<td><label for="fname">File ID</label>
<input name="fileid2[]" type="text" class="stretchnights" id="fileid2" value="fileid2"></td>
<td>
<label for="fname">First Name</label>
<input name="fname[]" type="text" class="stretch" size="15" maxlength="30" required >
</td>
<td>
<label for="lname">Last Name</label>
<input name="lname[]" type="text" class="stretch" size="15" maxlength="30" required >
</td>
</tr>
</table>
</ul>
<button type="button" class="add-row">+ New Client</button>
<table width="25%" border="0"> <tr> <input type="submit" name="Submit" value="Insert"></tr></table>
</span>
推荐阅读
- android - 点击相关关键字,如搜索输入
- gradle - gradle 从父子项目中排除依赖 jar
- java - 卡夫卡火花流集成错误
- django - 具有动态静止的无模型视图
- c++ - 寻找 C++ 库以提取 PDF 中的图像以及位置
- intellij-idea - 隐藏 IntelliJ Idea 运行窗口中显示的 JDK 路径
- android - 如何正确取消选择 RecyclerView 上的项目?
- c# - 为继承自 User 的实体添加自定义索引,该实体继承自 EF 中的 IdentityUser
- android - IndexOutOfBoundsException:检测到不一致。无效的项目位置 - RecylerView
- kubernetes - 如何只删除未挂载的 PVC 和 PV?