web前端DOM中table排序操作

近期一个项目用到了前端dom操作，主要是对一个table元素中的tr进行排序操作，当然强大的jquery库的使用的是少不了的；主要进行的操作如下：

html片段如下：

<table>
  <tr class="cct"><td></td>...</tr>
  <tr class="cct"><td></td>...</tr>
  <tr class="cct"><td></td>...</tr>
  ...
</table>

先将每个$('.cct')都绑定了对应的排序数据，如$('.cct').data('index', index)；

然后再对每个tr按照index由小到大排序，排序算法采用的是冒泡法，简单有效的方法；

对需要排序的tr经行了如下操作：

 1   var $temptr = $(this).clone();   //this指向要调整位置的tr，并对其进行一次拷贝，以便下次插入时用

 2   $(this).remove();   //移除位置将要调整的tr

 3   $($('.cct')[pos]).before($temptr);   //将已经删除的tr插入适当的位置中

发现在进行这样的一次操作后，给tr绑定的data('index')值会丢失，下次再用$(this).data('index')时会出现undefined；

因此在经行第一步操作后必须再次为$temptr绑定一次index值才能在下次继续经行排序时不出现 $(this).data('index') 为 undefined 的错误。