table鼠标移动拖动点击排序

来源：互联网发布：怎么加盟农村淘宝编辑：程序博客网时间：2024/05/05 21:01
实现表格的hover效果点击效果拖动排序，原生态jq效果，简单易用，不多说了，直接上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>鼠标移动点击顺序排序</title><script type="text/javascript" src="jquery-1.8.3.js"></script><style type="text/css">.tr-hover { background-color: #CCC; }.tr-selected { background-color: #666; } .tr-border { border: solid 1px #F00; } </style> </head> <body> <table width="500" border="1" cellpadding="0" cellspacing="0" id="table">    <thead>        <tr>            <th>序号</th>            <th>姓名</th>            <th>性别</th>            <th>网址</th>        </tr>    </thead>    <tbody>        <tr>            <td>1</td>            <td>Lupo</td>            <td>                <select name="">                  <option value="1">男</option>                  <option value="0">女</option>                </select>            </td>            <td><input type="text" value="http://bbs.it-home.org" /></td>        </tr>        <tr>            <td>2</td>            <td>andy</td>            <td>                <select name="">                  <option value="1">男</option>                  <option value="0">女</option>                </select>            </td>            <td><input type="text" value="http://bbs.it-home.org"  /></td>        </tr>        <tr>            <td>3</td>            <td>lilian</td>            <td>                <select name="">                  <option value="1">男</option>                  <option value="0">女</option>                </select>            </td>            <td><input type="text" value="http://bbs.it-home.org"  /></td>        </tr>        <tr>            <td>4</td>            <td>jinker</td>            <td>                <select name="">                  <option value="1">男</option>                  <option value="0">女</option>                </select>            </td>            <td><input type="text" value="http://bbs.it-home.org"  /></td>        </tr>    </tbody></table><script type="text/javascript">/***表格插件 实现表格的hover效果 点击效果 拖动排序*@encode UTF-8*@param {boolen} hover     是否打开hover效果 true|false*@param {boolen} selected    是否打开selected效果 true|false*@param {boolen} rowMove    是否打开移动排序效果 true|false*@example:    $("#table").initTable({        hover:true,        selected:false,        rowDrag:true,        rowMove:true    })    表格需包含thead,tbody2部分*/(function ($) {    $.fn.extend({        initTable:function (o) {            //接受配置参数并设定默认值            var it = this,                hover = o.hover||false,                selected = o.selected||false,                rowDrag = o.rowDrag||false;                rowMove =rowDrag?true:(o.rowMove||true),                tbody = $(it).children("tbody"),                tr = $(it).children("tbody").children("tr");            //添加事件前先移除对象所有的事件            it.undelegate();            //tr的鼠标移动效果            if (hover) {                tbody.delegate("tr", "mouseenter", function () {                    $(this).addClass("tr-hover");                }).delegate("tr", "mouseleave", function () {                    $(this).removeClass("tr-hover");                })            }            //tr的选中效果            if (selected) {                tbody.delegate("tr","click",function(e){                    if(e.target.tagName.toLowerCase()=="td"){                        tbody.children(".tr-selected").removeClass('tr-selected');                        $(this).addClass('tr-selected');                    }                })            }            //表格行的移动效果            if(rowMove){                var targetEl,mouseDown=false;                tbody.delegate("tr", "mousedown", function(e){                    //只对td对象触发                    if(e.target.tagName.toLowerCase() === "td"){                        //按下鼠标时选取行                        targetEl = this,mouseDown = true; console.log(this);                        $(this).css("cursor","move");                        return false;                    }                }).delegate("tr", "mousemove", function(e){                      //移动鼠标                      if (mouseDown) {                          //释放鼠标键时进行插入                          if (targetEl != this) {                              if ($(this).index()>$(targetEl).index()){                                  $($(this)).after(targetEl);                              } else {                                  $($(this)).before(targetEl);                              }                          }                      }                      return false;                }).delegate("tr", "mouseup", function (e) {                    $(tr).css("cursor","default");                    targetEl = null;                })                //鼠标离开表格时,释放所有事件                it.delegate("tbody", "mouseleave", function (e) {                    $(tr).css("cursor","default");                    targetEl = null;                    mouseDown = false;                })            }        }    })})(jQuery)$("#table").initTable({    hover:true,    selected:true,    rowMove:true})</script></body></html>
源码打包下载地址：http://bbs.it-home.org/thread-3001-1-1.html 文章转载自程序员之家web频道
0 0