Question

我正在忙着制作一个可克隆的表格。

我目前卡住了，我有13个输入字段，其中一个值是id，我可以克隆它，它将组的类更新为“group1”，“group2”等我需要获取第一个值输入字段组然后第二个等。

这是js小提琴：http://jsfiddle.net/dawidvdh/BLdDE/

这是jQuery：

//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependants = "dependant"+d_counter++;
var group;
var current_group = jQuery(document.activeElement);
//Clone Tracking
//General Variables

//General Variables
//Generate variables
var id_fields       =   [0,1,2,3,4,5,6,7,8,9,10,12,13];
var passport_fields =   [0,1,2,3,4,5,6,7,8,9,10,12,13];
var cell_fields     =   [0,1,2,3,4,5,6,7,8,9,10];

var id_input = "<input class='id' id="+'"'+"group"+g_counter+++'"'+" "+" maxlength='1' />";
//Generate variables

jQuery(document).ready(function(e) {
//populate jquery generated fields
jQuery(id_fields).each(function() {
    jQuery(id_input).appendTo('#id_field');
});
//populate jquery generated fields
//Cloning Function
jQuery('#clone').click(function(){
    clone_dependant();
});

function clone_dependant(){
    g_counter++;
    var clonedObj=jQuery('#id_field').clone().insertAfter("#id_field");
        clonedObj.find('.id').each(function(){
             $(this).prop('id', 'group'+g_counter).val(''); // chain the commands
    });
};
//Cloning Function
//Validation
function validate_gen(){};
function validate_Id(current_group){
    console.log(current_group);
};
function validate_Pass(){};
function validate_Email(){};
function validate_Cell(){};
//Validation
//Multiple Inputs function
$(document).on('keydown', 'input.id', function(e){
    if(e.keyCode == 8){
        $(this).val('');
        $(this).prev().val('');
        $(this).prev().focus();
         //Validate(current);
    }
});  

$(document).on('keyup', 'input.id', function(){
    var current_group = this.id;
    if (this.value.match(/\d+/)) {
        var $this = $(this);
        if ($this.next('input').length) {
          $this.next().focus();
        } else {
          validate_Id(current_group);
        }  
    }
});
//Multiple Inputs function

});

和html

<div id="id_field"></div>
<button id="clone">clone</button>

任何帮助都非常恭喜，谢谢：）

Answer 1

您的代码存在的问题是您拥有所有input's in a group的相同ID 。这会在提取当时值时弄乱它。

最好完全避免使用id's for the input's，并为包含整体的

提供唯一ID。(maybe group1 , group2 ....)

这种方式应该有所帮助..

//Clone Tracking
var g_counter = 1;
var d_counter = 1;
var dependants = "dependant" + d_counter++;
var group;
var current_group = jQuery(document.activeElement);
//Clone Tracking
//General Variables
var input_groups = ["group-1"];
//General Variables
//Generate variables
var id_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13];
var passport_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13];
var cell_fields = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var id_input = "<input class='id' maxlength='1' />";
//Generate variables
jQuery(document).ready(function(e) {
    //populate jquery generated fields
    jQuery(id_fields).each(function() {
        jQuery(id_input).appendTo('#group-1');
    });
    //populate jquery generated fields
    //Cloning Function
    jQuery('#clone').click(function() {
        clone_dependant();
    });

    function clone_dependant() {
        var clonedObj = jQuery('#group-1')
                              .clone().insertAfter("#group-" + g_counter);
        g_counter++;
        var newDivId = 'group-'+ g_counter;
        clonedObj.prop('id' ,newDivId ).find('input').each(function() {
            this.value = ''; // chain the commands
        });
        input_groups.push(newDivId);
    };
    //Cloning Function
    //Validation


    function validate_gen() {};

    function validate_Id(current_group) {
       // console.log(current_group);
    };

    function validate_Pass() {};

    function validate_Email() {};

    function validate_Cell() {};
    //Validation
    //Multiple Inputs function
    $(document).on('keydown', 'input.id', function(e) {
        if (e.keyCode == 8) {
            $(this).val('');
            $(this).prev().val('');
            $(this).prev().focus();
            //Validate(current);
        }
    });

    $(document).on('keyup', 'input.id', function() {
        var current_group = this.id;
        if (this.value.match(/\d+/)) {
            var $this = $(this);
            if ($this.next('input').length) {
                $this.next().focus();
            } else {
                validate_Id(current_group);
            }
        }
    });

    $('#getvalues').on('click', function(){
        $.each(input_groups , function(i){
            var id = input_groups[i];
            var values = $.map($('#'+id + ' input') , function(e,i){
                return $(e).val();
            }).join(' :: ');

            console.log('The values inside ' + id + ' : are ' + values);
        });            
    });
    //Multiple Inputs function
});

<强> Check Fiddle

<强>更新

如果是这种情况，我会clone d ependant div本身，而不是专门为所有div做这件事。

其次，您不需要遍历每个组来设置相同的值..

试试这个

function clone_dependant() {
        // Store the value of the previous Id to insert the cloned div..
        var oldId = g_counter;
        g_counter++;

        // Clone the Dependant Div and set a new id
        var $clonedDiv = jQuery('#dependant-1').clone(false)
                                           .attr('id', 'dependant-'+g_counter);
        var cell_newDiv = 'cell-group-'+ g_counter;
        var age_newDiv = 'age-group-'+ g_counter;
        var pass_newDiv = 'pass-group-'+ g_counter;
        var id_newDiv = 'group-'+ g_counter;

        // Find div's inside the cloned object and set a new id's
        $clonedDiv.find('#group-1').attr('id',"#group-" + g_counter );
        $clonedDiv.find('#age-group-1').attr('id',"#age-group-" + g_counter );
        $clonedDiv.find('#cell-group-1').attr('id',"#cell-group-" + g_counter );
        $clonedDiv.find('#pass-group-1').attr('id',"#pass-group-" + g_counter );

        // You don't need to Loop thru the inputs to set the value
        $clonedDiv.find('input').val('');

        // Insert the cloned object 
        $clonedDiv.insertAfter("#dependant-" + oldId);

        cell_input_groups.push(cell_newDiv);
        age_input_groups.push(age_newDiv);
        pass_input_groups.push(pass_newDiv);
        input_groups.push(id_newDiv);
    };

<强> UPDATED FIDDLE

获取jquery生成的多个输入字段的值

1 个答案: