近期一个项目用到了前端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 的错误。