Jquery如何为从1开始的每一行自动分配一个升序整数答案

【问题标题】：Jquery How to automatically assign an ascending integer for each row starting from 1Jquery如何为从1开始的每一行自动分配一个升序整数
【发布时间】：2017-07-04 16:57:26
【问题描述】：

现在，当输入行号并单击按钮时，将添加相应的行号。

现在，我想为从 1 开始的每一行分配一个升序整数，有什么想法吗？

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of injection');
  } else {

    $tbody = $('table tbody');
    $row = $tbody.find('tr:last');

    additionalRows = new Array(numNewRows + 0).join($row[0].outerHTML);

    $tbody.append(additionalRows);
  }
});

<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Rows no</button>
<table>
  <tbody>
    <tr>
      <td><input type="text" style="width: 100px" name="vaccineid[]"> </td>
      <td><input type="text" style="width: 160px" name="vaccinename1[]"></td>

    </tr>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

【问题讨论】：

如果你使用一个实际的循环，而不是那个 array-join-voodoo ...，这会更容易
正如 CBroe 所说。只需制作一个简单的循环并动态创建您的元素，而不是复制第一个。通过这种方式，您可以将循环索引分配给您想要的任何内容。

标签： javascript jquery

【解决方案1】：

我更改了表格主体以在表格第一列上包含从 1 开始的索引

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of injection');
  } else {

    $tbody = $('table tbody');
    $row = $tbody.find('tr:last');
    var lastRowIndex=($row.index()==-1? 0:$row.index()) +1 ;
    additionalRows = new Array(numNewRows);
    for(i=0;i<numNewRows;i++)
    {
    additionalRows[i]=` <tr>
    <td>${lastRowIndex}</td>
      <td>
      <input type="text" style="width: 100px" name="vaccineid[]"></td>
      <td><input type="text" style="width:160px"name="vaccinename1[]">   				</td>
  	  </tr>`
      lastRowIndex=lastRowIndex+1;
    }
   
    $tbody.append(additionalRows.join());
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Rows no</button>
<table>
  <tbody>
 
</table>

【讨论】：

非常感谢您的回答，而不是第1列，如何设置为第6列。
另外，整数是否可以显示在输入字段中，以便我可以获取该值并保存到数据库中，谢谢
现在好了，我修改我的代码并实现我想要的。感谢您的帮助

【解决方案2】：

使用while。他们将帮助迭代价值

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);
var i =0;
  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of injection');
  } else {

    $tbody = $('table tbody');
    $row = $tbody.find('tr:last');

while(i<numNewRows){
    additionalRows =$row[0].outerHTML
    $tbody.append(additionalRows);
    i++;
    }
  }
});

<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Rows no</button>
<table>
  <tbody>
    <tr>
      <td><input type="text" style="width: 100px" name="vaccineid[]"> </td>
      <td><input type="text" style="width: 160px" name="vaccinename1[]"></td>

    </tr>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

【讨论】：