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，那么你可以使用像

这样的函数生成一个id

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

并在每次附加新文件时为$(elmt).attr('id', createID());分配ID。

Answer 2

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

＆＃13;

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)
    })
}

＆＃13;

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

＆＃13;

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

2 个答案: