jquery动态添加表格行 移动行
html:
<table id="tbl">
???<tr>
?????<td>111</td>
?????<td>张三</td>
?????<td>
??????<input type="button" value="up" onclick="move(this,'up')" />?
??????<input type="button" value="down" onclick="move(this,'down')" />?
??????<input type="button" value="addTr" onclick="addTR()" />?
?????</td>
???</tr>
???<tr>
?????<td>222</td>
?????<td>李四</td>
?????<td>
??????<input type="button" value="up" onclick="move(this,'up')" />?
??????<input type="button" value="down" onclick="move(this,'down')" />
??????<input type="button" value="addTr" onclick="addTR()" />??
??????</td>
???</tr>
???<tr>
?????<td>333</td>
?????<td>王五</td>
?????<td>
??????<input type="button" value="up" onclick="move(this,'up')" />?
??????<input type="button" value="down" onclick="move(this,'down')" />?
??????<input type="button" value="addTr" onclick="addTR()" />?
??????</td>
???</tr>
???<tr>
?????<td>444</td>
?????<td>赵六</td>
?????<td>
??????<input type="button" value="up" onclick="move(this,'up')" />?
??????<input type="button" value="down" onclick="move(this,'down')" />?
??????<input type="button" value="addTr" onclick="addTR()" />?
?????</td>
???</tr>
?</table>
?
javascript:
??function move(obj,der){
????var $pre = $(obj).parent().parent().prev();
????var $next = $(obj).parent().parent().next();
????var $src = $(obj).parent().parent();
????
????switch(der){
??????case 'up':
??????if($pre){
???????? $src.insertBefore($pre);
???????}
???????break;
??????case 'down':
??????if( $next){
????????? $src.insertAfter($next);
???????}
???????break;
?????}
???}
???
???function addTR(){
?????var $tr = $('#tbl tr:last').clone(true);
?????$tr.appendTo($('#tbl'));
????}