Question

我正在填写以下表格：

在这里，用户首先单击“添加另一个类别”，该类别将从类别名称复制到最后一个添加更多按钮。让我们假设我们单击一次按钮，所以现在我们有两个类别块。现在，用户可以在两个块中输入详细信息。点击“添加更多”按钮后，表格将在该类别框中显示另一行输入的项目，数量和价格。因此，它仅适用于第一个类别块。

对于第二个类别块，如果我在其中单击“添加更多”，则它不会增加第二个类别块的项目，数量和价格输入，而是始终为第一个类别块增加它。

以下是我的html代码：

<div class="row">
  <div class="input-field col s12">
      <label>Menu</label>
      <br><br>
  </div>
  <div class="col s12" id="category">
      <div class="row" id="categoryContent">
          <div class="col s12">
              <h6>Categry name: </h6>
              <input type="text" name="category[]">
          </div>
          <div class="col s12"><h6>Veg</h6></div>
          <div class="col s12">
              <table>
                  <thead>
                  <tr>
                      <th>Item</th>
                      <th>Quantity</th>
                      <th>Price</th>
                  </tr>
                  </thead>
                  <tbody id="veg">
                      <tr id="vegContent">
                          <td>
                              <input type="text" name="vitem[][]">
                          </td>
                          <td>
                              <input type="text" name="vquantity[][]">
                          </td>
                          <td>
                              <input type="text" name="vprice[][]">
                          </td>
                      </tr>
                  </tbody>
              </table>
              <button class="btn waves-effect waves-light" onclick="addVeg()" type="button">Add More</button>
          </div>
          <div class="col s12"><h6>Non-Veg</h6></div>
          <div class="col s12">
              <table>
                  <thead>
                  <tr>
                      <th>Item</th>
                      <th>Quantity</th>
                      <th>Price</th>
                  </tr>
                  </thead>
                  <tbody id="nonVeg">
                      <tr id="nonVegContent">
                          <td>
                              <input type="text" name="nitem[][]">
                          </td>
                          <td>
                              <input type="text" name="nquantity[][]">
                          </td>
                          <td>
                              <input type="text" name="nprice[][]">
                          </td>
                      </tr>
                  </tbody>
              </table>
              <button class="btn waves-effect waves-light" onclick="addNonVeg()" type="button">
                  Add More
              </button>
          </div>
      </div>
  </div>
  <div class="col s12" style="text-align: center">
      <button class="btn waves-effect waves-light" onclick="addCategory()" type="button">
          Add Another Category
      </button>
  </div>
</div>

这是我的js代码：

function addCategory(){
    $("#category").append($("#categoryContent").clone());
}

function addVeg(){
    $("#veg").append($("#vegContent").clone());
};

function addNonVeg(){
    $("#nonVeg").append($("#nonVegContent").clone());
};

我希望在单击“添加更多”按钮时仅增加该块内的输入行。

Answer 1

您可以像

一样通过通用类访问元素（可以将类添加到每个元素）

<input type="text" name="nitem[][]" class="itemname">

以便您可以按以下方式访问它：

$('.itemname').each(function() {
    var currentElement = $(this);
    var value = currentElement.val(); 
});

OR

您可以为每个元素添加不同的值，如下所示：

<input type="text" name="nitem[][]" id="Item1">
<input type="text" name="nitem[][]" id="Item2">

您可以访问它。

$('#Item1').val();

Answer 2

首先，您需要克隆所有元素，然后可以将其附加到另一个div，我在提供的代码中做了一些更正，现在它对我有用。

`

function addCategory(){
      $('#category').clone().appendTo('#categoryContent');
}
function addVeg(){
    //$("#veg").append($("#vegContent").clone());
    $('#veg').clone().appendTo('#vegContent');
};

function addNonVeg(){
    $('#nonVeg').clone().appendTo('#nonVegContent');
};

`

在几个相似的div之间调用div中的函数时，会在div中访问元素

2 个答案: