在添加行的情况下增加jquery中的数字

Question

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

我的table有一些rows和button 添加行。

表rows包含input字段，具有特定name。

例如：我有两行，第一行有name="qty1"，第二行row有name="qty2"。为了添加第三行，还有按钮add row。

所以，现在将添加第三个row。

第三行中name的{​​{1}}应该是input，但它只是name="qty3"。

我试过了：

name="qty"

$(document).ready(function(){
        $(".add-row").click(function(){
            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" value="" placeholder="Quantity"></td></tr>';
            $("table").append(markup);
        });
    });    

所以，我的问题是如何按行增加数字？

Answer 1

使用计数器作为名称并在每次点击时递增：

更新：使用insertBefore()方法在提交按钮之前添加行。 我建议您查看DOM insertion outside和DOM insertion inside方法。

$(document).ready(function() {
    var cont = 3
    $(".add-row").click(function() {
        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' + cont + '" value="" placeholder="Quantity"></td></tr>';
        $(markup).insertBefore($('button[type="submit"]').closest("tr"));
        cont++;
    });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<form method="post">

    <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
        <tr>
            <td colspan="3">
                <input type="text" name="customer" value="" placeholder="Customer Name">
            </td>
        </tr>
        <tr>
            <th>Item</th>
            <th>Service</th>
            <th>Qty</th>

        </tr>

        <tr>
            <td><input type="text" name="item1" value="" placeholder="Item"></td>
            <td><select class="country" name="what1">
  <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" value="" placeholder="Quantity"></td>
        </tr>
        <tr>
            <td><input type="text" name="item2" value="" placeholder="Item"></td>
            <td><select class="country" name="what2">
  <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="qty2" value="" placeholder="Quantity"></td>
        </tr>

        <tr>
            <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
        <span class="glyphicon glyphicon-save"></span> &nbsp; Save
        </button>
            </td>
        </tr>
    </table>
    <input type="button" class="add-row" value="Add Row">
</form>

Answer 2

  

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

var nextNumber = $("#chiru_inv tbody").children().length - 2;

Working jsfiddle

您还可以考虑在这些任务中学习优于jquery的技术，例如React.js，Angular，Vue.js

Answer 3

页面加载时，获取已存在的输入数。然后，当您添加新输入时，请始终增加该数字并将其添加到输入的名称qty + the number of existing inputs。

$(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);
    });
}); 

Answer 4

最好为输入行指定一个CSS class，并使用以下内容作为解决方案之一：

// 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>

$(document).ready(function() {
  $(".add-row").click(function() {
    var markup = '<tr class="inputRow"><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" value="" placeholder="Quantity"></td></tr>';
    $("table > tbody").append(markup);

    // 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);

  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<form method="post">

  <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
    <tbody>
      <tr>
        <td colspan="3">
          <input type="text" name="customer" value="" placeholder="Customer Name">
        </td>
      </tr>
      <tr>
        <th>Item</th>
        <th>Service</th>
        <th>Qty</th>

      </tr>

      <tr class="inputRow">
        <td><input type="text" name="item1" value="" placeholder="Item"></td>
        <td><select class="country" name="what1">
  <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" value="" placeholder="Quantity"></td>
      </tr>
      <tr class="inputRow">
        <td><input type="text" name="item2" value="" placeholder="Item"></td>
        <td><select class="country" name="what2">
  <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="qty2" value="" placeholder="Quantity"></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
        <span class="glyphicon glyphicon-save"></span> &nbsp; Save
        </button>
        </td>
      </tr>
    </tfoot>
  </table>
  <input type="button" class="add-row" value="Add Row">
</form>

Answer 5

好的，我建议您在标记中添加一个类（在我的示例中为qtyRow）中标记表中的行：

var markup = '<tr class="qtyRow"><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" value="" placeholder="Quantity"></td></tr>';

在您的示例中，默认情况下有两行。这些也应该有qtyRow类。 您可以通过此获取行的amoutn，并为新的qtyRow添加1：

var number = $("tr.qtyRow").length + 1;

现在你需要将name =“qty”更改为name =“qtyn”，其中是上面代码行中的新数字。在$（“。add-row”）里面。在标记声明后需要添加的click（）监听器：

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

请告诉我这是否适合您：）