Javascript 在添加行时增加jquery中的数字

也许这个问题也很难解释和理解

我有一个

表

，其中有一些

行

和

按钮

的添加行

表

行

包含

输入

字段，具有特定的

名称

例如：我有两行，第一行是

name=“qty1”

，第二行是

name=“qty2”

。对于添加第三行，有按钮

addrow

因此，现在将添加第三行

第三行
输入的
名称应为
name=“qty3”
，但仅为
name=“qty”

我试过：


$（文档）.ready（函数（）{
$（“.add行”）。单击（函数（）{
var标记='选择PartPart 1 Part 2 Part 3 Part 4 Part 5'；
$（“表格”）。附加（标记）；
});
});    

项目
服务
数量
选择部分
第一部分
第二部分
第三部分
第四部分
第五部分
选择部分
第一部分
第二部分
第三部分
第四部分
第五部分
拯救
使用计数器作为名称，并在每次单击中递增：


更新：使用
insertBefore（）
方法在提交按钮前添加行。
我建议你看一看它的原理和方法


$（文档）.ready（函数（）{
var cont=3
$（“.add行”）。单击（函数（）{
var标记='选择PartPart 1 Part 2 Part 3 Part 4 Part 5'；
$（标记）.insertBefore（$（'button[type=“submit”]）.closest（“tr”）；
cont++；
});
});

项目
服务
数量
选择部分
第一部分
第二部分
第三部分
第四部分
第五部分
选择部分
第一部分
第二部分
第三部分
第四部分
第五部分
拯救
使用计数器作为名称，并在每次单击中递增：


更新：使用
insertBefore（）
方法在提交按钮前添加行。
我建议你看一看它的原理和方法


$（文档）.ready（函数（）{
var cont=3
$（“.add行”）。单击（函数（）{
var标记='选择PartPart 1 Part 2 Part 3 Part 4 Part 5'；
$（标记）.insertBefore（$（'button[type=“submit”]）.closest（“tr”）；
cont++；
});
});

项目
服务
数量
选择部分
第一部分
第二部分
第三部分
第四部分
第五部分
选择部分
第一部分
第二部分
第三部分
第四部分
第五部分
拯救

使用.children（）.length（）计算表tbody的子项以获得下一个数字



您还可以考虑在这些任务中优于JQuery的学习技术，如ReaC.JS、角度、VUE、JS/P>
使用.children（）.length（）计算表tbody的子项以获得下一个数字


您还可以考虑在这些任务中优于JQuery的学习技术，如ReaT.js、角、VU.js
< P>当页面加载时，获取已经存在的输入数。然后，在添加新输入时，始终增加该数字，并将其添加到输入的名称
数量+现有输入的数量

$(document).ready(function(){
    var elCount = $("form table input[name^='qty']").length;
    $(".add-row").click(function(){
        elCount++;
        var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty' + elCount + '" value="" placeholder="Quantity"></td></tr>';
        $("table").append(markup);
    });
}); 

$（文档）.ready（函数（）{
var elCount=$（“表单表输入[name^='qty']）；
$（“.add行”）。单击（函数（）{
elCount++；
var标记='选择PartPart 1 Part 2 Part 3 Part 4 Part 5'；
$（“表格”）。附加（标记）；
});
}); 
加载页面时，获取已经存在的输入数。然后，在添加新输入时，始终增加该数字，并将其添加到输入的名称
数量+现有输入的数量

$(document).ready(function(){
    var elCount = $("form table input[name^='qty']").length;
    $(".add-row").click(function(){
        elCount++;
        var markup = '<tr><td><input type="text" name="item" value="" placeholder="Item"></td><td><select class="country" name="what"><option value="Select Part">Select Part</option><option value="1">Part 1</option><option value="2">Part 2</option><option value="3">Part 3</option><option value="4">Part 4</option><option value="5">Part 5</option></select></td><td><input type="text" name="qty' + elCount + '" value="" placeholder="Quantity"></td></tr>';
        $("table").append(markup);
    });
}); 

$（文档）.ready（函数（）{
var elCount=$（“表单表输入[name^='qty']）；
$（“.add行”）。单击（函数（）{
elCount++；
var标记='选择PartPart 1 Part 2 Part 3 Part 4 Part 5'；
$（“表格”）。附加（标记）；
});
}); 
最好为输入行指定CSS
类，并使用以下解决方案之一：

// Get all rows
// Note: expecting input row having class 'inputRow'
var allRows = $('table tr.inputRow');

// Set proper value to 'name' attribute
allRows.last().find('input[name=item]').attr('name', 'item' + allRows.length);

HTML
table
标记也需要修复：

<table>

  <tbody>
    <!-- data rows goes here -->
  </tbody>

  <tfoot>
    <!-- save button row goes here-->
  </tfoot>

</table>




$（文档）.ready（函数（）{
$（“.add行”）。单击（函数（）{
var标记='选择PartPart 1 Part 2 Part 3 Part 4 Part 5'；
$（“表>正文”）。附加（标记）；
//获取所有行
//注意：应为具有类“inputRow”的输入行
var allRows=$（'table tr.inputRow'）；
//将适当的值设置为“name”属性
allRows.last（）.find（'input[name=item]'）.attr（'name'，'item'+allRows.length）；
});
});

项目
服务
数量
选择部分
第一部分
第二部分
第三部分
第四部分
第五部分
选择部分
第一部分
第二部分
第三部分
第四部分
第五部分
拯救
最好为输入行指定CSS
类，并使用以下解决方案之一：

// Get all rows
// Note: expecting input row having class 'inputRow'
var allRows = $('table tr.inputRow');

// Set proper value to 'name' attribute
allRows.last().find('input[name=item]').attr('name', 'item' + allRows.length);

HTML
table
标记也需要修复：

<table>

  <tbody>
    <!-- data rows goes here -->
  </tbody>

  <tfoot>
    <!-- save button row goes here-->
  </tfoot>

</table>




$（文档）。
var number = $("tr.qtyRow").length + 1;
markup = markup.peplace('name="qty"', 'name="qty' + number + '"');