javascript - 如何正确计算多行表单脚本中的行数？

Question

我对我修改的多行表单脚本有疑问。我在manufacturer_catalog_nr 值的基础上，添加了根据 ProductsData json 数组中的值填充 ean、product_description 和 category_id 输入的函数。当我单独添加行并立即填充 manucaturer_catalog_nr 时，一切正常。脚本正在填充其余的输入。但是当我添加两行或更多行时，脚本只填充最后一个 ean、product_description 和 category_id 输入。同样的问题是删除行并添加下一行时。

我只知道问题在于计数，但我不知道如何解决这个问题。

 $(document).ready(function(){  

 var count = 0;
 $('#add').click(function(){     
  count = document.getElementById("product_table_rows").rows.length;
  var html_code = '';
  var html_code = "<tr id='row"+(count+1)+"'>";
    html_code += '<td><div class="input-group"><div class="input-group-addon">P</div><input list="manufacturer_catalog_nr_list" autocomplete="off" type="text" id="manufacturer_catalog_nr_'+count+'" name="manufacturer_catalog_nr['+count+']" class="form-control catalog-filter" title="Numer katalogowy producenta. Jeśli go nie znasz, wpisz numer dystrybutora." required /></div><div class="input-group"><div class="input-group-addon">D</div><input type="text" id="supplier_catalog_nr_'+count+'" name="supplier_catalog_nr['+count+']" class="form-control catalog-filter" title="Numer katalogowy dystrybutora. Jeśli go nie znasz wpisz numer producenta." required /></div>';
    html_code += '<td><input type="text" id="ean_'+count+'" name="ean['+count+']" pattern="[0]|.{8,8}|.{13,13}" required title="Wpisz 8 lub 13 cyfr numeru EAN lub 0 jeżeli go nieznasz" class="form-control ean-filter" /></td>';
    html_code += '<td><input type="text" id="quantity_'+count+'" name="quantity['+count+']" class="form-control qty-filter" required/></td>';
    html_code += '<td><select id="unit_'+count+'" name="unit['+count+']" class="form-control"><option value="szt.">szt.</option><option value="m">m</option><option value="kg">kg</option><option value="kpl.">kpl.</option></select></td>';
    html_code += '<td><textarea rows="2" cols="50" style="width:100%; height:66px; resize: vertical; min-height:34px;" id="product_description_'+count+'" name="product_description['+count+']" class="form-control" /></textarea></td>';
    html_code += '<td><div class="input-group"><input type="text" id="price_'+count+'" name="price['+count+']" class="form-control price-filter"/><div class="input-group-addon">zł</div></div></td>';
    html_code += '<td><select id="category_id_'+count+'" name="category_id" class="form-control" required></select><select onchange="this.className=this.options[this.selectedIndex].className" id="" name="" value="" class="form-control green"><option class="form-control green" selected>Normalny</option><option class="form-control red">Wysoki</option></select></td></td>';
    html_code += '<td><textarea rows="1" cols="50" style="width:100%; height:66px; resize: vertical; min-height:34px;" id="assembly_'+count+'" name="assembly['+count+']" class="form-control" /></textarea></td>';
    html_code += "<td><button type='button' name='remove' data-row='row"+(count+1)+"' class='btn btn-danger btn-xs remove'><span class='glyphicon glyphicon-minus'></span></button></td>";   
    html_code += "</tr>";   
    
    $.getJSON('../manage_categories.php', function(data) {  
    var html = "";
    html += '<option hidden selected disabled>Wybierz kategorię</option>';
    for(var option in data){
        html += `<optgroup label="`+ option  +`">`;
        data[option].forEach(function(item){
        html += `<option value="` + item["pc_option_value"] + `" >`+ item["pc_option_name"] +`</option>`
        });
        html += `</optgroup>`;
    }
    $('#category_id_'+count).append(html);
    });
    
    $('#product_table').append(html_code);
    
    $('#manufacturer_catalog_nr_'+count).change(function () {
        var input_catalog_nr = $(this).val();
        var check = false;
        for (var index = 0; index < ProductsData.length; ++index) {
             var product = ProductsData[index];

             if(product.manufacturer_catalog_nr == input_catalog_nr){
               check = true;
               break;
             }
            }
        if(check == true) {
        $('#ean_'+count).val(ProductsData[index].ean);
        $('#product_description_'+count).val(ProductsData[index].product_description);
        $('#category_id_'+count).val(ProductsData[index].category_id);
        }
    });
    
    $.getScript("js/input_filters.js",function(){
    Inputs_filters();
    });
    
    });
    
    $(document).on('click', '.remove', function(){
    var delete_row = $(this).data("row");
    $('#' + delete_row).remove();
    });

});

标签： javascriptphp

Answer 1

我找到了解决方案：

1. data-line='+count+'在manufacturer_catalog_nr输入中添加一个属性，
2. 在输入填充函数中使用数据行值设置 var "input_line" ，

var input_line = $(this).data("line");`

3. 将 var input_line添加到要填充的输入中，

$('#ean_'+input_line).val(ProductsData[index].ean);
$('#product_description_'+input_line).val(ProductsData[index].product_description);
$('#category_id_'+input_line).val(ProductsData[index].category_id);

4. 享受。