使用 <divs> 生成一个表，其中每一行都应包含相同的 html 元素集但具有唯一的 id？

Question

我正在使用一个使用 div 标签制作的表格，其中每个 div 标签都分配给row 类。每一行都包含一个复选框、两个下拉菜单、数量微调器和一个按钮。现在，我已经对这些行进行了五次硬编码，因为一行中的每个元素都必须有一个唯一的 id。但是我需要根据我从数据库记录中获得的计数来自动化这些行的创建和附加。我也使用 ajax 函数获得了记录数。我浏览了一些帖子，但所有帖子都是关于填充和附加同一行，该行中的相同元素集没有唯一的 id。

这是我的jsp代码；

<div class="row item-tbl-row">
  <div class="col-xs-2">
    <label class="checkbox-inline">
      <form:checkbox value="pizza" class="checkbox chkbxPkgCat" path="categoryName" id="chkPkgPzza" />Pizza
    </label>
  </div>
  <div class="col-xs-3">
    <form:select type="text" class="form-control" path="itemName" id="slctItmPkgPzza">
      <form:option value="-" label="---" />
    </form:select>
  </div>
  <div class="col-xs-3">
    <form:select type="text" class="form-control" path="" id="szpr1">
      <form:option value="-" label="---" />
    </form:select>
  </div>
  <div class="col-xs-2">
    <input class="qty-spinner" type="number" min="0" id="pzzaQty" />
  </div>
  <div class="col-xs-2">
    <form:button type="button" value="" class="btn btn-success btnAddItmPkg" id="btnAddPkgPizza">
      <span class="glyphicon glyphicon-plus"></span>Add
    </form:button>
  </div>
</div>

<div class="row item-tbl-row">
  <div class="col-xs-2">
    <label class="checkbox-inline">
      <form:checkbox value="Salad" class="checkbox chkbxPkgCat" path="" id="chkPkgSld" />Salad
    </label>
  </div>
  <div class="col-xs-3">
    <form:select type="text" class="form-control" path="itemName" id="slctItmPkgSalad">
      <form:option value="-" label="---" />
    </form:select>
  </div>
  <div class="col-xs-3">
    <form:select type="text" class="form-control" path="" id="szprc2">
      <form:option value="-" label="---" />
    </form:select>
  </div>
  <div class="col-xs-2">
    <input class="qty-spinner" type="number" id="sldQty" min="0" />
  </div>
  <div class="col-xs-2">
    <form:button type="button" value="" class="btn btn-success btnAddItmPkg" id="btnAddPkgSalad">
      <span class="glyphicon glyphicon-plus"></span>Add
    </form:button>
  </div>
</div>

我使用这些 id 来提取和发送值以进行如下处理，并希望将它们作为 json 数据发送。这就是为什么我需要使用唯一 ID 填充元素。

 /*
     * populating the item list in add Package.jsp
     **/
    $(".chkbxPkgCat").click(function () {
        var categoryNm = $(this).val();
        var slctElement = $(this).parent().parent().next().find(".form-control").attr('id');
        var selectedItm = $(this).parent().parent().next().next().find(".form-control").attr('id');

        setItemList(categoryNm, slctElement, selectedItm);
    });

如何使用 jQuery 和 javascript 生成此表，其中行的元素可以具有唯一的 id？任何帮助都会得到帮助。

Answer 1

您需要创建一行，然后您可以克隆它更改为每个克隆生成新的 id

var n = 5;
for (i = 0; i < n; i++) {
  $('.row:first').clone().after("#id")
    .appendTo(document.body)
    .find('.checkbox').text('Text' + i).end()
    .find('*[id]').each(function() {
      $(this).attr('id', $(this).attr('id') + i)
    })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row item-tbl-row">
  <div class="col-xs-2">
    <label class="checkbox-inline">
      <form:checkbox value="pizza" class="checkbox chkbxPkgCat" path="categoryName" id="chkPkgPzza" />Pizza
    </label>
  </div>
  <div class="col-xs-3">
    <form:select type="text" class="form-control" path="itemName" id="slctItmPkgPzza">
      <form:option value="-" label="---" />
    </form:select>
  </div>
  <div class="col-xs-3">
    <form:select type="text" class="form-control" path="" id="szpr1">
      <form:option value="-" label="---" />
    </form:select>
  </div>
  <div class="col-xs-2">
    <input class="qty-spinner" type="number" min="0" id="pzzaQty" />
  </div>
  <div class="col-xs-2">
    <form:button type="button" value="" class="btn btn-success btnAddItmPkg" id="btnAddPkgPizza">
      <span class="glyphicon glyphicon-plus"></span>Add
    </form:button>
  </div>
</div>

Answer 2

如果您的问题只是获取一个唯一的 id，那么您可以使用类似的函数生成一个 id

function createID() {
  return "id-" + Date.now();
}
console.log(createID());

并在每次附加新 elmt 时分配像 $(elmt).attr('id', createID()); 这样的 id。