Javascript 如何使用jQuery在动态添加的行上重新设置索引_Javascript_Jquery

Javascript 如何使用jQuery在动态添加的行上重新设置索引

javascript jquery

Javascript 如何使用jQuery在动态添加的行上重新设置索引,javascript,jquery,Javascript,Jquery,我已经找过了，找不到我要找的东西。我有一个基于索引动态添加行的表。所以我点击第5行中的一个链接，我想在索引6处添加一行。问题在于，当我添加行时，所有原始索引都保留在何处。我看到的所有代码都必须处理类或属性的名称，但这是html提供的索引。如何重置它？这是我的密码： <table class="table" id="inventoryList"> <thead> <tr> <th class="text-center">#</th&

我已经找过了，找不到我要找的东西。我有一个基于索引动态添加行的表。所以我点击第5行中的一个链接，我想在索引6处添加一行。问题在于，当我添加行时，所有原始索引都保留在何处。我看到的所有代码都必须处理类或属性的名称，但这是html提供的索引。如何重置它？这是我的密码：

<table class="table" id="inventoryList">
<thead>
  <tr>
    <th class="text-center">#</th>
    <th>Class Date</th>
    <th class="text-center">Time</th>
    <th>Instruction</th>
    <th class="text-center">Registrants</th>
    <th class="text-center">Status</th>
    <th>&nbsp;</th>
  </tr>
</thead>
<tbody>

  <tr>
    <td class="text-center">1</td>
    <td class="">Friday, December 15, 2017</td>
    <td class="text-center">
      <select id="course-time" name="course-time" data-id="34" class="form-control">
        <option value="0">...</option>

          <option value="1">1 AM</option>

          <option value="2">2 AM</option>

          <option value="3">3 AM</option>

          <option value="4">4 AM</option>

          <option value="5">5 AM</option>

          <option value="6">6 AM</option>

          <option value="7">7 AM</option>

          <option value="8" selected="">8 AM</option>

          <option value="9">9 AM</option>

          <option value="10">10 AM</option>

          <option value="11">11 AM</option>

          <option value="12">12 AM</option>

          <option value="13">1 PM</option>

          <option value="14">2 PM</option>

          <option value="15">3 PM</option>

          <option value="16">4 PM</option>

          <option value="17">5 PM</option>

          <option value="18">6 PM</option>

          <option value="19">7 PM</option>

          <option value="20">8 PM</option>

          <option value="21">9 PM</option>

          <option value="22">10 PM</option>

          <option value="23">11 PM</option>

          <option value="24">12 PM</option>

      </select>
    </td>
    <td class="">
      <select id="course-instructor" name="course-instructor" data-id="34" class="form-control">
        <option value="0">Choose Instructor</option>

          <option value="1">Raymond Bieselin</option>

          <option value="2">Joseph Saglimbene</option>

          <option value="3">Raymond Scotto</option>

          <option value="4">James Lawrence</option>

          <option value="5">Richard Allen</option>

          <option value="6">Tom Flynn</option>

          <option value="7">Bob Loveridge</option>

          <option value="8">Damien Avilies</option>

          <option value="9">Paul Walsh</option>

      </select>
    </td>
    <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a>
    </td>
    <td class="text-center">
      <select id="course-status" name="course-status" data-id="34" class="form-control">
        <option value="open" selected="">Open</option>
        <option value="closed">Closed</option>
        <option value="cancel">Cancel</option>
      </select>
    </td>
    <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="34"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td>
  </tr>

  <tr>
    <td class="text-center">2</td>
    <td class="">Thursday, December 14, 2017</td>
    <td class="text-center">
      <select id="course-time" name="course-time" data-id="35" class="form-control">
        <option value="0">...</option>

          <option value="1">1 AM</option>

          <option value="2">2 AM</option>

          <option value="3">3 AM</option>

          <option value="4">4 AM</option>

          <option value="5">5 AM</option>

          <option value="6">6 AM</option>

          <option value="7">7 AM</option>

          <option value="8" selected="">8 AM</option>

          <option value="9">9 AM</option>

          <option value="10">10 AM</option>

          <option value="11">11 AM</option>

          <option value="12">12 AM</option>

          <option value="13">1 PM</option>

          <option value="14">2 PM</option>

          <option value="15">3 PM</option>

          <option value="16">4 PM</option>

          <option value="17">5 PM</option>

          <option value="18">6 PM</option>

          <option value="19">7 PM</option>

          <option value="20">8 PM</option>

          <option value="21">9 PM</option>

          <option value="22">10 PM</option>

          <option value="23">11 PM</option>

          <option value="24">12 PM</option>

      </select>
    </td>
    <td class="">
      <select id="course-instructor" name="course-instructor" data-id="35" class="form-control">
        <option value="0">Choose Instructor</option>

          <option value="1">Raymond Bieselin</option>

          <option value="2">Joseph Saglimbene</option>

          <option value="3">Raymond Scotto</option>

          <option value="4">James Lawrence</option>

          <option value="5">Richard Allen</option>

          <option value="6">Tom Flynn</option>

          <option value="7">Bob Loveridge</option>

          <option value="8">Damien Avilies</option>

          <option value="9">Paul Walsh</option>

      </select>
    </td>
    <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a>
    </td>
    <td class="text-center">
      <select id="course-status" name="course-status" data-id="35" class="form-control">
        <option value="open" selected="">Open</option>
        <option value="closed">Closed</option>
        <option value="cancel">Cancel</option>
      </select>
    </td>
    <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="35"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td>
  </tr>

  <tr>
    <td class="text-center">3</td>
    <td class="">Saturday, December 9, 2017</td>
    <td class="text-center">
      <select id="course-time" name="course-time" data-id="33" class="form-control">
        <option value="0">...</option>

          <option value="1">1 AM</option>

          <option value="2">2 AM</option>

          <option value="3">3 AM</option>

          <option value="4">4 AM</option>

          <option value="5">5 AM</option>

          <option value="6">6 AM</option>

          <option value="7">7 AM</option>

          <option value="8" selected="">8 AM</option>

          <option value="9">9 AM</option>

          <option value="10">10 AM</option>

          <option value="11">11 AM</option>

          <option value="12">12 AM</option>

          <option value="13">1 PM</option>

          <option value="14">2 PM</option>

          <option value="15">3 PM</option>

          <option value="16">4 PM</option>

          <option value="17">5 PM</option>

          <option value="18">6 PM</option>

          <option value="19">7 PM</option>

          <option value="20">8 PM</option>

          <option value="21">9 PM</option>

          <option value="22">10 PM</option>

          <option value="23">11 PM</option>

          <option value="24">12 PM</option>

      </select>
    </td>
    <td class="">
      <select id="course-instructor" name="course-instructor" data-id="33" class="form-control">
        <option value="0">Choose Instructor</option>

          <option value="1">Raymond Bieselin</option>

          <option value="2">Joseph Saglimbene</option>

          <option value="3">Raymond Scotto</option>

          <option value="4">James Lawrence</option>

          <option value="5">Richard Allen</option>

          <option value="6">Tom Flynn</option>

          <option value="7">Bob Loveridge</option>

          <option value="8">Damien Avilies</option>

          <option value="9">Paul Walsh</option>

      </select>
    </td>
    <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a>
    </td>
    <td class="text-center">
      <select id="course-status" name="course-status" data-id="33" class="form-control">
        <option value="open" selected="">Open</option>
        <option value="closed">Closed</option>
        <option value="cancel">Cancel</option>
      </select>
    </td>
    <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="33"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td>
  </tr>

  <tr>
    <td class="text-center">4</td>
    <td class="">Friday, December 8, 2017</td>
    <td class="text-center">
      <select id="course-time" name="course-time" data-id="32" class="form-control">
        <option value="0">...</option>

          <option value="1">1 AM</option>

          <option value="2">2 AM</option>

          <option value="3">3 AM</option>

          <option value="4">4 AM</option>

          <option value="5">5 AM</option>

          <option value="6">6 AM</option>

          <option value="7">7 AM</option>

          <option value="8" selected="">8 AM</option>

          <option value="9">9 AM</option>

          <option value="10">10 AM</option>

          <option value="11">11 AM</option>

          <option value="12">12 AM</option>

          <option value="13">1 PM</option>

          <option value="14">2 PM</option>

          <option value="15">3 PM</option>

          <option value="16">4 PM</option>

          <option value="17">5 PM</option>

          <option value="18">6 PM</option>

          <option value="19">7 PM</option>

          <option value="20">8 PM</option>

          <option value="21">9 PM</option>

          <option value="22">10 PM</option>

          <option value="23">11 PM</option>

          <option value="24">12 PM</option>

      </select>
    </td>
    <td class="">
      <select id="course-instructor" name="course-instructor" data-id="32" class="form-control">
        <option value="0">Choose Instructor</option>

          <option value="1">Raymond Bieselin</option>

          <option value="2">Joseph Saglimbene</option>

          <option value="3">Raymond Scotto</option>

          <option value="4">James Lawrence</option>

          <option value="5">Richard Allen</option>

          <option value="6">Tom Flynn</option>

          <option value="7">Bob Loveridge</option>

          <option value="8">Damien Avilies</option>

          <option value="9">Paul Walsh</option>

      </select>
    </td>
    <td class="text-center"><a href="#" class="registrants" data-total="0"><i class="fa fa-user text-info" aria-hidden="true"> [0]</i></a>
    </td>
    <td class="text-center">
      <select id="course-status" name="course-status" data-id="32" class="form-control">
        <option value="open" selected="">Open</option>
        <option value="closed">Closed</option>
        <option value="cancel">Cancel</option>
      </select>
    </td>
    <td class="text-center"><a href="#" class="inventory-delete" data-cid="1" data-id="32"><i class="fa fa-trash text-danger" aria-hidden="true"></i></a></td>
  </tr>

</tbody>
</table>


#
上课日期
时间
指示
注册人
地位
1.
2017年12月15日，星期五
...
凌晨1点
凌晨2点
凌晨3点
凌晨4点
上午5点
上午6点
上午7点
上午8点
上午9点
上午10点
上午11点
上午12点
下午一时
下午二时
下午三点
下午四点
下午五点
下午六点
下午7点
晚上八点
晚上9点
晚上10点
晚上11点
下午12点
选择讲师
雷蒙德·比塞林
约瑟夫·萨格林本
雷蒙德·斯科托
詹姆斯·劳伦斯
理查德艾伦
汤姆·弗林
鲍勃·洛弗里奇
达米恩·阿维利斯
保罗·沃尔什
打开
关闭
取消
2.
2017年12月14日，星期四
...
凌晨1点
凌晨2点
凌晨3点
凌晨4点
上午5点
上午6点
上午7点
上午8点
上午9点
上午10点
上午11点
上午12点
下午一时
下午二时
下午三点
下午四点
下午五点
下午六点
下午7点
晚上八点
晚上9点
晚上10点
晚上11点
下午12点
选择讲师
雷蒙德·比塞林
约瑟夫·萨格林本
雷蒙德·斯科托
詹姆斯·劳伦斯
理查德艾伦
汤姆·弗林
鲍勃·洛弗里奇
达米恩·阿维利斯
保罗·沃尔什
打开
关闭
取消
3.
2017年12月9日，星期六
...
凌晨1点
凌晨2点
凌晨3点
凌晨4点
上午5点
上午6点
上午7点
上午8点
上午9点
上午10点
上午11点
上午12点
下午一时
下午二时
下午三点
下午四点
下午五点
下午六点
下午7点
晚上八点
晚上9点
晚上10点
晚上11点
下午12点
选择讲师
雷蒙德·比塞林
约瑟夫·萨格林本
雷蒙德·斯科托
詹姆斯·劳伦斯
理查德艾伦
汤姆·弗林
鲍勃·洛弗里奇
达米恩·阿维利斯
保罗·沃尔什
打开
关闭
取消
4.
2017年12月8日，星期五
...
凌晨1点
凌晨2点
凌晨3点
凌晨4点
上午5点
上午6点
上午7点
上午8点
上午9点
上午10点
上午11点
上午12点
下午一时
下午二时
下午三点
下午四点
下午五点
下午六点
下午7点
晚上八点
晚上9点
晚上10点
晚上11点
下午12点
选择讲师
雷蒙德·比塞林
约瑟夫·萨格林本
雷蒙德苏格兰
詹姆斯·劳伦斯
理查德艾伦
汤姆·弗林
鲍勃·洛弗里奇
达米恩·阿维利斯
保罗·沃尔什
打开
关闭
取消

以下是jQuery部分：

$(document).on('click','.registrants',function(){
  var curIndex = $(this).closest('tr').index();
  $('#inventoryList tr').eq(curIndex).after('<tr><td></td></tr>');
});

$（文档）.on（'click'，'registents'，function（）{
var curIndex=$（this.closest（'tr'）.index（）；
$（'#inventoryList tr'）.eq（curIndex）.after（''）；
});

您可以在单击的父tr之后直接插入新元素，如：

$(document).on('click', '.registrants', function() {
  var curIndex = $(this).closest('tr').after('<tr><td></td></tr>');
})

$（文档）.on（'click'，'registents'，function（）{
var curIndex=$（this）.closest（'tr'）。在（''）之后；
})

片段：

$（文档）.on（'click'，'registents'，function（）{
var curIndex=$（this）.closest（'tr'）。在（'newline'）之后；
})


#
上课日期
时间
指示
注册人
地位
1.
2017年12月15日，星期五
...
凌晨1点
凌晨2点
凌晨3点
凌晨4点
上午5点
上午6点
上午7点
上午8点
上午9点
上午10点
上午11点
上午12点
下午一时
下午二时
下午三点
下午四点
下午五点
下午六点
下午7点
晚上八点
晚上9点
晚上10点
晚上11点
下午12点
选择讲师
雷蒙德·比塞林
约瑟夫·萨格林本
雷蒙德·斯科托
詹姆斯·劳伦斯
理查德艾伦
汤姆·弗林
鲍勃·洛弗里奇
达米恩·阿维利斯
保罗·沃尔什
打开
关闭
取消
2.
2017年12月14日，星期四
...
凌晨1点
凌晨2点
凌晨3点
凌晨4点
上午5点
上午6点
上午7点
上午8点
上午9点
上午10点
上午11点
上午12点
下午一时
下午二时
下午三点
下午四点
下午五点
下午六点
下午7点
晚上八点
晚上9点
晚上10点
晚上11点
下午12点
选择讲师
雷蒙德·比塞林
约瑟夫·萨格林本
雷蒙德·斯科托
詹姆斯·劳伦斯
理查德艾伦
汤姆·弗林
鲍勃·洛弗里奇