Question

我不是最擅长使用jQuery，但我确实要求它能够使我的网站用户友好。

我的网站中有几个表，每个用户都应该可以添加/删除行。我在stackoverflow的帮助下创建了一个jquery函数，并成功添加/删除了行。现在唯一的问题是那些输入字段的名称有点搞砸了。我希望每个输入字段都是一个数组：所以像第一行的name [0]，第二行的name [1]等等。我有一堆表都有不同的输入，所以我将如何制作jQuery相应调整名称？

我的功能，完全不起作用，但我不知道如何改变它。

我的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();
     };
  });
});

我还在这里创建了一个jsFiddle：https://jsfiddle.net/tareenmj/err73gLL/。

非常感谢任何帮助。

更新 - 部分工作解决方案

在很多用户的帮助下，我能够创建一个执行此操作的功能：

$("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);

});

工作的jsFiddle在这里：https://jsfiddle.net/tareenmj/amojyjjn/2/

唯一的问题是，如果我没有选择选择输入中的任何选项，它就不会为我提供null值，而应该是。有关解决此问题的任何提示吗？

Answer 1

我想我理解你的问题。看看这个fiddle是否适合您......

这就是我所做的，在每个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);
});

本质上，我基于name，字符串和行索引将_分成两部分。每次调用add_row时，我都会增加行索引。

因此，当添加行时，每一行都会有类似以下结构...

 // 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.

如果您正在寻找，请告诉我。

Answer 2

为需要它的任何人提供完整的工作解决方案

因此，在进行了大量研究后，我发现了一种非常简单的方法。我没有手动调整数组的名称，而是意识到如果提供数组作为名称，clone方法将自动为您完成。所以像name =＆＃34; name []＆＃34;最终会工作。没有任何文字的括号必须在那里。解释无法完全描述代码，因此这是此行为所需的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();
     };
});
});

这里提供了一个完全正常工作的JSfiddle：https://jsfiddle.net/tareenmj/amojyjjn/5/

只是提示，您必须删除已禁用的选项，因为这不会传递null值。

JQuery：找到一种命名克隆输入字段的方法

2 个答案: