[英]JQuery: Finding a way to name cloned input fields
I'm not the best at using jQuery, but I do require it to be able to make my website user-friendly. 我不是最擅长使用jQuery,但我确实要求它能够使我的网站用户友好。
I have several tables involved in my website, and for each the user should be able to add/delete rows. 我的网站中有几个表,每个用户都应该可以添加/删除行。 I created a jquery function, with help from stackoverflow, and it successfully added/deleted rows. 我在stackoverflow的帮助下创建了一个jquery函数,并成功添加/删除了行。 Now the only problem with this is the names for those input fields is slightly messed up. 现在唯一的问题是那些输入字段的名称有点搞砸了。 I would like each input field to be an array: so like name[0] for the first row, name[1] for the second row, etc. I have a bunch of tables all with different inputs, so how would I make jQuery adjust the names accordingly? 我希望每个输入字段都是一个数组:所以像第一行的name [0],第二行的name [1]等等。我有一堆表都有不同的输入,所以我将如何制作jQuery相应调整名称?
My function, doesn't work completely, but I do not know how to go about changing it. 我的功能,完全不起作用,但我不知道如何改变它。
My Jquery function looks like: 我的Jquery函数看起来像:
$(document).ready(function() {
$("body").on('click', '.add_row', function() {
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
var clone = tr.clone();
clone.find("input").val('');
clone.find("select").val('');
clone.find('input').each(function(i) {
$(this).attr('name', $(this).attr('name') + i);
});
clone.find('select').each(function(i) {
$(this).attr('name', $(this).attr('name') + i);
});
tr.after(clone);
});
$("body").on('click', '.delete_row', function() {
var rowCount = $(this).closest('.row').prev('table').find('tr.ia_table').length;
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
if (rowCount > 1) {
tr.remove();
};
});
});
I also created a jsFiddle here: https://jsfiddle.net/tareenmj/err73gLL/ . 我还在这里创建了一个jsFiddle: https ://jsfiddle.net/tareenmj/err73gLL/。
Any help is greatly appreciated. 任何帮助是极大的赞赏。
UPDATE - Partial Working Solution 更新 - 部分工作解决方案
After help from a lot of users, I was able to create a function which does this: 在很多用户的帮助下,我能够创建一个执行此操作的函数:
$("body").on('click', '.add_row', function() {
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
var clone = tr.clone();
clone.find("input").val('');
clone.find("select").val('');
clone.find('input').each(function() {
var msg=$(this).attr('name');
var x=parseInt(msg.split('[').pop().split(']').shift());
var test=msg.substr(0,msg.indexOf('['))+"[";
x++;
x=x.toString();
test=test+x+"]";
$(this).attr('name', test);
});
clone.find('select').each(function() {
var msg1=$(this).attr('name');
var x1=parseInt(msg1.split('[').pop().split(']').shift());
var test1=msg1.substr(0,msg1.indexOf('['))+"[";
x1++;
x1=x1.toString();
test1=test1+x1+"]";
$(this).attr('name', test1);
});
tr.after(clone);
});
A working jsFiddle is here: https://jsfiddle.net/tareenmj/amojyjjn/2/ 一个工作的jsFiddle在这里: https ://jsfiddle.net/tareenmj/amojyjjn/2/
The only problem is that if I do not select any of the options in the select inputs, it doesn't provide me with a value of null, whereas it should. 唯一的问题是,如果我没有选择选择输入中的任何选项,它不会为我提供null值,而它应该。 Any tips on fixing this issue? 有关解决此问题的任何提示?
I think I understand your problem. 我想我理解你的问题。 See if this fiddle works for you... 看看这个小提琴是否适合你......
This is what I did, inside each of the clone.find()
functions, I added the following logic... 这就是我所做的,在每个clone.find()
函数中,我添加了以下逻辑......
clone.find('input').each(function(i) {
// extract the number part of the name
number = parseInt($(this).attr('name').substr($(this).attr('name').indexOf("_") + 1));
// increment the number
number += 1;
// extract the name itself (without the row index)
name = $(this).attr('name').substr(0, $(this).attr('name').indexOf('_'));
// add the row index to the string
$(this).attr('name', name + "_" + number);
});
In essence, I separate the name
into 2 parts based on the _
, the string and the row index. 本质上,我根据_
,字符串和行索引将name
分为2部分。 I increment the row index every time the add_row
is called. 每次调用add_row
时,我都会增加行索引。
So each row will have something like the following structure when a row is added... 因此,当添加行时,每行将具有类似以下结构的内容...
// row 1
sectionTB1_1
presentationTB1_1
percentageTB1_1
courseTB1_1
sessionTB1_1
reqElecTB1_1
// row 2
sectionTB1_2
presentationTB1_2
percentageTB1_2
courseTB1_2
sessionTB1_2
reqElecTB1_2
// etc.
Let me know if this is what you were looking for. 如果这是您正在寻找的,请告诉我。
Full Working Solution for Anyone Who needs it 适合任何需要它的人的完整工作解决方案
So after doing loads and loads of research, I found a very simple way on how to do this. 因此,在做了大量的研究之后,我找到了一种非常简单的方法来解决这个问题。 Instead of manually adjusting the name of the array, I realised that the clone method will do it automatically for you if you supply an array as the name. 我没有手动调整数组的名称,而是意识到如果提供数组作为名称,clone方法将自动为您完成。 So something like name="name[]" will end up working. 所以像name =“name []”这样的东西最终会起作用。 The brackets without any text has to be there. 没有任何文字的括号必须在那里。 Explanation can't possible describe the code fully, so here is the JQuery code required for this behaviour to work: 解释无法完全描述代码,因此以下是此行为所需的JQuery代码:
$(document).ready(function() {
$("body").on('click', '.add_row', function() {
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
var clone = tr.clone();
clone.find("input").val('');
tr.after(clone);
});
$("body").on('click', '.delete_row', function() {
var rowCount =
$(this).closest('.row').prev('table').find('tr.ia_table').length;
var tr = $(this).closest('.row').prev('table').find('tr.ia_table:last');
if (rowCount > 1) {
tr.remove();
};
});
});
A fully working JSfiddle is provided here: https://jsfiddle.net/tareenmj/amojyjjn/5/ 这里提供了一个完全正常工作的JSfiddle: https ://jsfiddle.net/tareenmj/amojyjjn/5/
Just a tip, that you have to be remove the disabled select since this will not pass a value of null. 只是一个提示,您必须删除禁用的选择,因为这不会传递null值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.