代码之家 › 专栏 › 技术社区 › ThoughtfulCollector

jQuery appendTo忽略最后一个元素

append jquery javascript

ThoughtfulCollector · 技术社区 · 2 年前

var count = 1;

$("#addBtn").click(function(){
  $('#trid1').clone().appendTo('table#exampleTable > tbody');
  count++;
  $('#trid1').last().prop('id', 'trid'+count);
  $('#trid'+count+' > th').html(count);
});

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table" id="exampleTable">
  <thead>
    <tr>
      <th scope="col">c1</th>
    </tr>
  </thead>
  <tbody>
    <tr id="trid1" class="trclass">
      <th scope="row">1</th>
    </tr>
  </tbody>
</table>
<button type="button" id="addBtn">Add</button>

1 回复 | 直到 2 年前

Diego D 2 年前

无论如何,我考虑到了这个策略,稍微重构了您的代码,并且在每次单击add按钮时更好地处理当前索引。最新索引保存在表中的数据属性中。

$("#addBtn").click(function(){
  const latestIndex = $('#exampleTable').data('latest-index');
  let i = latestIndex+1;
  const newRow = $('#trid1').clone();
  newRow.prop('id', `trid${i}`);
  newRow.data('index', i);
  newRow.text(i);
  newRow.appendTo('table#exampleTable > tbody');
  $('#exampleTable').data('latest-index', i);
});

button{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="exampleTable" data-latest-index="1">
  <thead>
    <tr>
      <th scope="col">Rows</th>
    </tr>
  </thead>
  <tbody>
    <tr id="trid1" class="trclass">
      <th scope="row">1</th>
    </tr>
  </tbody>
</table>
<button type="button" id="addBtn">Add</button>

推荐文章

ThoughtfulCollector · jQuery appendTo忽略最后一个元素

2 年前

Hernan HumaÃ±a · 在JQUERY中的foreach内追加

6 年前

Rohalt · 选择单选按钮时清除输入

6 年前

Anthony Salamin · 向表单元素添加多个复选框

6 年前

Kyle Underhill · 单击时为每个按钮添加/删除div

6 年前

Hamza Ebrahim · 用户输入被错误地附加到Python列表

6 年前

Sunny Rahevar · 无法在jquery中附加HTML代码

6 年前

Karma · 基于datetime将df2中的多行追加到df1

6 年前

Martin Bobak · 如何将多个项目附加到熊猫df?

6 年前

joe · 如果找不到具有特定类jquery的子级,则追加div

6 年前