克隆表格行 [英] Cloning a table row
问题描述
我有下表
<table id="customFields" class="table table-bordered table-hover additionalMargin alignment">
<thead>
<tr>
<th colspan="2"></th>
<th>Some Title</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="subjectline" for="User1">User NOC M1</label></td>
<td id="slLabel">SLA</td>
<td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
<td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
</tr>
</tbody>
</table>
然后我将使用以下JavaScript来添加其他行
I then have the following javascript to add additional rows
$(function() {
$(".addCF").click(function(){
$("#customFields").append('<tr><td></td><td>SL_B</td> <td><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td> <td> <a href="javascript:void(0);" class="remCF">Remove</a></td></tr>');
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
这目前可以我想要的方式工作.但是,我遇到了两件事.
This currently works how I want it to. However, there are a couple of things I am having issues with.
首先,当您第一次查看它时,您会看到标签SL_A.在克隆的版本中,我手动将其设置为SL_B.然后,所有其他克隆都具有SL_B.我想做的是让SL_后面跟着字母表中的下一个字母.因此,第三行应为SL_C.我不太确定如何实现这一目标.
Firstly, when you first view it, you will see the label SL_A. In the cloned version, I manually set it to SL_B. All other clones then have SL_B. What I am trying to do is have SL_ followed by the next letter in the alphabet. So the third row should be SL_C. I am not too sure how I can achieve this.
我的第二个问题与克隆输入的名称有关.目前,它们的名称都相同,例如slOptions[User][NOC M1]
添加新行时,名称应更改为唯一的名称,可能使用上方的字母附加字母,例如slOptions[User][NOC M1B]
My second issue relates to the name of the cloned input. At the moment, they all have the same name e.g. slOptions[User][NOC M1]
When a new row is added, the name should change to something unique, maybe using the additional letter of the alphabet above e.g. slOptions[User][NOC M1B]
是否有可能实现这些目标?
Would it be possible to achieve these things?
我已经设置了小提琴进行演示
谢谢
推荐答案
您可以存储对可能字母以及当前字母的引用,然后在函数中确定要使用的合适字母:
You could store a reference to the possible letters as well as your current letter and then within your function determine the appropriate one to use :
// Store the possible letters
var possibleLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Store the current letter
var currentLetter = 'A';
$(function() {
$(".addCF").click(function(){
// Resolve the next letter to add
var nextIndex = possibleLetters.indexOf(currentLetter) + 1;
// Update your reference
currentLetter = possibleLetters[nextIndex];
// Append it
$("#customFields").append('<tr><td></td><td>SL_' + currentLetter + '</td> <td><input type="text" name="slOptions[User][NOC M1' + currentLetter + ']"...');
// More code omitted for brevity
});
// Still more code omitted for brevity
});
您可以在此处查看此示例的操作,并在下面进行演示:
You can see an example of this in action here and demonstrated below :
这篇关于克隆表格行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!