索引编号的JavaScript克隆表单元素问题

JavaScript clone form element issue with index numbering

本文关键字：表单 元素 问题 编号 JavaScript 索引      更新时间：2023-09-26

我有一个表格，我想在其中记录一个练习集，然后根据需要添加新的练习集。这一部分工作得很好，但如果删除上一个以外的集合，就会抛出集合编号。

HTML:

<div class="form-group">
    <tbody class="tbodyClone">
        <tr id="clonedInput1" class="clonedInput">
            <td><h4 name="set" class="heading-reference">Set 1</h4>
              <select id="style" class="form-control">
                <option>Pull ups</option>
                <option>Push ups</option>
            </select></td>
            <td><select id="weight" class="form-control">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select></td>
            <td><select id="reps" class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                                                                   </select></td>
            <td>
                <button id="btnAdd_0" name="btnAdd_0" type="button" class="clone btn btn-success"><i class="fa fa-plus-circle"></i></button>
                <button id="btnDel_0" name="btnDel_0" type="button" class="remove btn btn-danger"><i class="fa fa-trash-o"></i></button>
            </td>
        </tr>
    </tbody>
</table>

JavaScript:

var regex = /^(.*)('d)+$/i;
var cloneIndex = $(".clonedInput").length;
if ($(".clonedInput").length == 1) {
    $('.remove').hide();
} else {
    $('.remove').show();
}
function clone() {
     cloneIndex++;
    $(this).parents(".clonedInput").clone()
        .appendTo(".tbodyClone")
        .attr("id", "clonedInput" + cloneIndex)
        .find(".heading-reference").text('Set ' + cloneIndex)
        .on('click', 'clone', clone)
        .on('click', 'remove', remove);

    //delete
    console.log("Total lines => " + $(".clonedInput").length);
    if ($(".clonedInput").length == 1) {
        $('.remove').hide();
    } else {
        $('.remove').show();
    }
}
function remove() {
    $(this).parents(".clonedInput").remove();
    cloneIndex--;
    if ($(".clonedInput").length == 1) {
        $('.remove').hide();
    } else {
        $('.remove').show();
    }
}
$(document).on("click", ".clone", clone);
$(document).on("click", ".remove", remove);

即使一个集合被删除了，我有什么方法可以按顺序保持集合编号吗？

将其合并到现有代码中最简单的方法是在删除一行之后重构以下所有行的ID。

function remove() {
  var toRemove = $(this).closest(".clonedInput");
  // which ID are we removing?
  var removedId = parseInt(toRemove.attr('id').replace("clonedInput",""));
  // .nextAll will take all following siblings, that match the selector.
  // this avoids reassigning IDs to entries in front of the removed one...
  // ...since they don't change anyway
  toRemove.nextAll('.clonedInput').each(function(){
    $(this).attr('id', "clonedInput"+(removedId)).find(".heading-reference").text('Set ' + removedId)
    removedId++;
  });
  toRemove.remove();
  cloneIndex--;
  if ($(".clonedInput").length == 1) {
      $('.remove').hide();
  } else {
      $('.remove').show();
  }
}

没有测试此代码，所以如果出现任何问题，请告诉我。

jQuery的.index()为您获取匹配元素的索引。

请注意，您不希望在不更改克隆中元素的id的情况下对其进行更改——id在整个页面上应该是唯一的。我还没有删除片段中的所有内容。

function fixVisibility()
{
    // or just do this in css
    if ($(".clonedInput").length == 1) {
        $('.remove').hide();
    } else {
        $('.remove').show();
    }
}
function fixIndices()
{
  // if you delete an item on top, the indices should be fixed.
  $('.clonedInput').each(function(){
    var tr = $(this);
    var cloneIndex = tr.index() + 1;
    tr.removeAttr('id')
        .attr("id", "clonedInput" + cloneIndex)
        .find(".heading-reference").text('Set ' + cloneIndex).end();
  });
}
function clone()
{
    var tr = $(this).closest(".clonedInput");
    var cloneIndex = tr.index() + 2;
  
    tr.clone().removeAttr('id')
        .attr("id", "clonedInput" + cloneIndex)
        .find(".heading-reference").text('Set ' + cloneIndex).end()
        .appendTo('.tbodyClone');
  
    fixVisibility();
    //delete
    console.log("Total lines => " + $(".clonedInput").length);
}
function remove() {
    $(this).parents(".clonedInput").remove();
    fixVisibility();
    fixIndices();
}
fixVisibility();
$(document).on("click", ".clone", clone);
$(document).on("click", ".remove", remove);
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="form-group">
    <tbody class="tbodyClone">
        <tr id="clonedInput1" class="clonedInput">
            <td><h4 name="set" class="heading-reference">Set 1</h4>
              <select id="style" class="form-control">
                <option>Pull ups</option>
                <option>Push ups</option>
            </select></td>
            <td><select id="weight" class="form-control">
                <option>0</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select></td>
            <td><select id="reps" class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select></td>
            <td>
                <button class="clone btn btn-success"><i class="fa fa-plus-circle"></i></button>
                <button class="remove btn btn-danger"><i class="fa fa-trash-o"></i></button>
            </td>
        </tr>
    </tbody>
</table>

相关文章：