Question

我想从动态生成的输入框中提取值，该输入框位于tr标记内。但由于某种原因，我面临着错误，我将未定义为值。我能做错什么？我对Jquery比较新。所以，我想知道我在哪里做错了。

index.js

       function dynamic_children() {
    $(function () {
        var no = $('#number_children').val()
        $('#id_children-TOTAL_FORMS').val = no

        children_added = $('#children_td_table tr').length
        remaining = 4 - children_added

        //determine if the no of children input are more than those left
        if (no > remaining) {
            //show alert that max children reached
            $('max-children').show()
            setTimeout(function () {
                $('max-children').hide()
            }, 3000);
        } else if (no < children_added) {

            no_to_remove = children_added - no
            for (i = 0; i < no_to_remove; i++) {
                $('#children_td_table').children().last().remove();
            }

        }
        else {
            for (var i = 0; i < remaining && i < no; i++) {
                no_ = i + 1
                $('#children_td_table')
                    .append($('<tr>')
                        .append('<td>' + no_ + '</td>')
                        .append($('<td>')
                            .append($('<input>')
                                .addClass('Input-text')
                                .attr('name', 'children-' + i + '-child_name')
                                .attr('id', 'children-' + i + '-child_name')

                            )



                        )
                        .append($('</td>'))
                        .append($('<td>')
                            .append($('<input>')
                                .addClass('Input-text')
                                .attr('name', 'children-' + i + '-child_dob')
                                .prop('type', 'date')
                                .prop('class', 'children-' + i + '-child_age')
                                .change(function () {
                                    d = new Date($(this).val());
                                    var before = moment($(d, 'YYYY-MM-DD'));
                                    var age = moment().diff(d, 'years');
                                    age_id_name = "#" + $(this).attr('class')
                                    $(age_id_name).val(age);
                                })
                            ))
                        .append($('</td>'))
                        .append($('<td>')
                            .append($('<input>')
                                .addClass('Input-text')
                                .attr('id', 'children-' + i + '-child_age')
                                .attr('name', 'child')
                                .prop('type', 'text')
                            ))
                        .append($('</td>'))
                    )
                    .append($('</tr>'))
            }

        }


        //
        // for (var i = 0; i < no && i < 4; i++) {
        //
        //
        //     $("#delete_row").click(function () {
        //         if (i > 1) {
        //             $("#addr" + (i - 1)).html('');
        //             i--;
        //         }
        //     });
        // }
    })
}

function savechildinfo(){
    var numofchildren = $("#number_children").val();
    console.log("CHildrennumber",numofchildren);
    var tr = $("#children_td_table").closest('tr');



    for(var i =0;i<numofchildren;i++){
        var c = "children-"+i+"-child_name";
        var d = tr.find(c).val();

        console.log("childrenname",d);


    }
}

Answer 1

很难理解并阅读您的代码，但我在下面突出显示您的问题。

首先不需要closest使用$("#children_td_table")单独使用var tr。其次，如果您希望#找到var c，则忘记添加ID，因此应使用var c = "#children-" + i + "-child_name";

var i = 1;
var no_ = '123' // just for fix the error


$('#children_td_table')
  .append($('<tr>')
    .append('<td>' + no_ + '</td>')
    .append($('<td>')
      .append($('<input type="text"/>')
        .addClass('Input-text')
        .attr('name', 'children-' + i + '-child_name')
        .attr('id', 'children-' + i + '-child_name')
        .val('test') // remove this later
      ))
    .append('</td>')
    .append('</tr>')
  );

savechildinfo(); // I execute this on load

function savechildinfo() {
  var numofchildren = 2; // just for fix the error
  console.log("CHildrennumber", numofchildren);
  
  var tr = $("#children_td_table");
  // remove closest
  
  for (var i = 0; i < numofchildren; i++) {
    var c = "#children-" + i + "-child_name";
    // -----^ add #
    var d = tr.find("#children-" + i + "-child_name").val();

    console.log("childrenname", d);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="children_td_table"></table>

Jquery从动态生成的输入框中获取值？

1 个答案: