之前公司同事写了JQuery插件,但自己还没有接触,所以特地用了清明放假的时间写了一个小插件,还没写完美,不过能用就先上了!
这里简单介绍下功能:根据input的向上或向下移动,移动当前input所在的tr;
<!-- To change this template, choose Tools | Templates and open the template in the editor. --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <mce:script type="text/javascript" src="jquery-1.5.2.min.js" mce_src="jquery-1.5.2.min.js"></mce:script> <mce:script type="text/javascript"><!-- /* * @author : 张志华(Singhania) * @date : 2011-4-4 * @function : 根据move_up和move_down移动tr; * * 参数说明 * limit : 移动的最高点默认1 * lower_limit : 移动的最低点,默认是tr的总数 * table_css : table的样式 * tr_css : tr的样式 * th_css : th的样式 * td_css : td的样式 * onmousr_over : 鼠标停留在上的样式 */ (function($){ $.fn.TrExchangePlaces = function(options){ var this_table = $(this); var tr = this_table.find('tr'); var th = tr.find('th'); var td = tr.find('td'); var tr_cnt = parseInt(tr.size()); var defaults = { limit : 1, lower_limit : tr_cnt, table_css : {width:'50%',border:'0',cellspacing:'0',cellpadding:'0'}, tr_css : {background:'#ecf6fc'}, th_css : {background:'#0066ff',color:'#fff',lineHeight:'20px',height:'30px'}, td_css : {borderBottom:'1px solid #95bce2',verticalAlign:'top',textAlign:'center'}, onmousr_over : {background:'#bcd4ec'} } var opts = $.extend(defaults,options); if(tr_cnt <= 0) { alert('没有找到tr.'); return; } this_table.css(opts.table_css); tr.css(opts.tr_css); th.css(opts.th_css); td.css(opts.td_css); tr.hover(function(){//光棒效果 $(this).css(opts.onmousr_over); },function(){ $(this).css(opts.tr_css); }); DoubleHide(); $('input.move_up').bind('click',function(e){ e.preventDefault(); var this_tr = $(this).parents('tr'); //获取 当前input所在的tr var tr_index = this_tr.index() + 1; //获取 当前tr在table中的索引 var prev_tr = this_tr.prev(); $(this_tr).insertBefore(prev_tr); DoubleHide(); }); $('input.move_down').bind('click',function(e){ e.preventDefault(); var this_tr = $(this).parents('tr'); var tr_index = this_tr.index() + 1; //获取 当前tr在table中的索引 var next_tr = this_tr.next(); $(this_tr).insertAfter(next_tr); DoubleHide(); }); function DoubleHide() { FirstMoveUpInputHide(); LastMoveDownInputHide(); } function FirstMoveUpInputHide() { this_table.find('input.move_up').show(); $.each(this_table.find('tr'),function(){ //在最高点之前的tr,将隐藏所有move_up if($(this).index() <= opts.limit) $(this).find('input.move_up').hide(); }); } function LastMoveDownInputHide() { this_table.find('input.move_down').show(); $.each(this_table.find('tr'),function(){ //在最低点之后的tr,将隐藏所有的move_down if(($(this).index()+1) >= opts.lower_limit) $(this).find('input.move_down').hide(); }); } return $(this); } //end function })(jQuery); $(function(){ $("table").TrExchangePlaces(); }); // --></mce:script> </head> <body> <table cellpadding="0" border="0" > <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> <tr> <td>Singhania</td> <td>25</td> <td><input type="button" value="上移" class="move_up"><input type="button" value="下移" class="move_down"></td> </tr> <tr> <td>TracyYun</td> <td>23</td> <td><input type="button" value="上移" class="move_up"><input type="button" value="下移" class="move_down"></td> </tr> <tr> <td>Test</td> <td>20</td> <td><input type="button" value="上移" class="move_up"><input type="button" value="下移" class="move_down"></td> </tr> <tr> <td>huangmeiji</td> <td>23</td> <td><input type="button" value="上移" class="move_up"><input type="button" value="下移" class="move_down"></td> </tr> </table> </body> </html>