javascript - 如何获取动态创建的输入字段的值(Json)

Question

输入字段是通过 jquery 根据用户输入创建的如果用户输入数量:5 那么我创建了 5 个输入字段

例如，如果用户给出 Quantity = 3 那么这就是使用 Jquery 动态创建 html 的方式

<tr id = "tr_1">
  <td><input type="text" name="cont_no1" id="cont_no1" /><td>
  <td><input type="text" name="cont_size1" id="cont_size1" /><td>
  <td><input type="text" name="cont_type1" id="cont_type1" /><td>
</tr>
<tr id = "tr_2">
  <td><input type="text" name="cont_no2" id="cont_no1" /><td>
  <td><input type="text" name="cont_size2" id="cont_size2" /><td>
  <td><input type="text" name="cont_type2" id="cont_type2" /><td>
</tr>
<tr id = "tr_3">
  <td><input type="text" name="cont_no3" id="cont_no3" /><td>
  <td><input type="text" name="cont_size3" id="cont_size3" /><td>
  <td><input type="text" name="cont_type3" id="cont_type3" /><td>
</tr>

现在我需要将所有这些输入字段值存储在 json 中。

            var jsonObj=  jsonObj || [];   
            for(var i=1; i<cont_qty; i++)
            {
                item = {};
                item ["cont_no"] = $('#cont_no'+i).val();
                item ["cont_size"] = $('#cont_size'+i).val();
                item ["cont_type"] = $('#cont_type'+i).val();
                jsonObj.push(item);  
            }

我试过这样但它不起作用请有人帮助我。谢谢

这里有完整代码供您引用，var auto_tr 值在此处对齐(使用输入)以达到您的目的。

$(document).ready(function(){


$( "#cont_qty" ).change(function() 
{    
    var itemCount = 0;
    $("#munna").empty();

    var cont_qty = this.value;
    for(var i=0 ; cont_qty>i; i++)
    {
    itemCount++;
    // dynamically create rows in the table
    var auto_tr = '<tr id="tr'+itemCount+'">
                        <td>
                            <input class="input-medium" type="text" id="cont_no'+itemCount+'" name="cont_no'+itemCount+'" value="">
                        </td>
                        <td>
                             <select class="input-mini" name="cont_size'+itemCount+'" id="cont_size'+itemCount+'">
                                <option>20</option>
                                <option>40</option>
                                <option>45</option>
                            </select>
                        </td>
                        <td>
                            <select class="input-mini" name="cont_type'+itemCount+'" id="cont_type'+itemCount+'">
                                <option>DV</option>
                                <option>HD</option>
                                <option>HC</option>
                                <option>OT</option>
                                <option>FR</option>
                                <option>HT</option>
                                <option>RF</option>
                            </select>
                        </td>
                        <td>
                            <select class="input-medium" name="cont_tonnage'+itemCount+'" id="cont_tonnage'+itemCount+'">
                                <option>24000 Kgs</option>
                                <option>27000 Kgs</option>
                                <option>30480 Kgs</option>
                                <option>Super Heavy Duty</option>
                            </select>
                        </td>
                        <td>
                            <input  class="input-medium" type="text"  id="cont_tare'+itemCount+'" name="cont_tare'+itemCount+'" value="">
                        </td>
                        <td>
                            <input class="input-medium" name="cont_netweight'+itemCount+'" id="cont_netweight'+itemCount+'" type="text" value="">
                        </td>
                        <td>
                            <input  class="input-mini" name="yom'+itemCount+'" id="yom'+itemCount+'" type="text" value=""></td>
                        <td>
                            <select class="input-medium" name="cont_condition'+itemCount+'" id="cont_condition'+itemCount+'">
                                <option>IICL</option>
                                <option>ASIS</option>
                                <option>CARGO WORTHY</option>
                            </select>
                        </td>
                </tr>';     

        $("#munna").append(auto_tr);
    }
});


        $("#getButtonValue").click(function () 
        {
            var jsonObj=  jsonObj || [];   
            for(var i=1; i<cont_qty.value; i++)
            {
                item = {};
                item ["cont_no"] = $('#cont_no'+i).val();
                item ["cont_size"] = $('#cont_size'+i).val();
                item ["cont_type"] = $('#cont_type'+i).val();
                jsonObj.push(item);  
            }
            alert(jsonObj[0].cont_no[1]);
        });
 });

Answer 1

小循环错误:)

         for(var i=1; i<=cont_qty.value; i++)
                {
                    alert(cont_qty.value);
                    item = {};
                    item ["cont_no"] = $('#cont_no'+i).val();
                    item ["cont_size"] = $('#cont_size'+i).val();
                    item ["cont_type"] = $('#cont_type'+i).val();
                    jsonObj.push(item);  
                }

在前一个i<cont_qty.value现在使用的这个刚刚更改为i<=cont_qty.value

因此当数量为 4 时循环运行了 3 次。现在刚刚添加 <=

谢谢 friend 们的回答