table 列排序&行变色&按上下键光标在行上移动&上下移动行并保存DB

最新推荐文章于 2022-11-09 23:50:38 发布

Neil2013

最新推荐文章于 2022-11-09 23:50:38 发布

阅读量682

点赞数

分类专栏： css

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

/*单击TR变色 */
    var preTR = null;//全局变量
    function TRbackgroundClick(ctrl) {
        if (preTR != null) {
            var preCells = preTR.getElementsByTagName("td");
            for (var i = 0; i < preCells.length; i++) {
                preCells[i].style.backgroundColor = "";
            }
        }
        var cells = ctrl.getElementsByTagName("td");
         for (var i = 0; i < cells.length; i++) {
            cells[i].setAttribute("style", "background-color:#ecfbd4;");
          }
        preTR = ctrl;
    }

///table 列排序
    function getDate(strDate) {
        strDate = strDate.replace(/-/g, "/");
        var date = new Date(strDate);
        return date;
    }

$(function () {

$('table.myTable').each(function () {
var $table = $(this); //将table存储为一个jquery对象

$("tbody tr td", $table).click(function () {//单击单元格行变色

                $('td').not(this).removeClass("active");
                $(this).addClass("active").siblings("td").addClass("active");
            })

            $('th', $table).each(function (column) {
                var findSortKey;
                if ($(this).is('.sort-alpha')) {       //按字母排序
                    findSortKey = function ($cell) {
                        return $cell.find('sort-key').text().toUpperCase() + '' + $cell.text().toUpperCase();
                    };
                } else if ($(this).is('.sort-numeric')) {       //按数字排序
                    findSortKey = function ($cell) {
                        var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''));
                        return isNaN(key) ? 0 : key;
                    };
                } else if ($(this).is('.sort-date')) {          //按日期排序
                    findSortKey = function ($cell) {
                        return getDate($cell.text());
                    };
                }

                if (findSortKey) {
                    $(this).addClass('clickable').hover(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); }).click(function () {
                        //反向排序状态声明
                        var newDirection = 1;
                        if ($(this).is('.sorted-asc')) {
                            newDirection = -1;
                        }
                        var rows = $table.find('tbody>tr').get(); //将数据行转换为数组
                        $.each(rows, function (index, row) {
                            row.sortKey = findSortKey($(row).children('td').eq(column));
                        });
                        rows.sort(function (a, b) {
                            if (a.sortKey < b.sortKey) return -newDirection;
                            if (a.sortKey > b.sortKey) return newDirection;
                            return 0;
                        });
                        $.each(rows, function (index, row) {
                            $table.children('tbody').append(row);
                            row.sortKey = null;
                        });

                        $table.find('th').removeClass('sorted-asc').removeClass('sorted-desc');
                        var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')');
                        //实现反向排序
                        if (newDirection == 1) {
                            $sortHead.addClass('sorted-asc');
                        } else {
                            $sortHead.addClass('sorted-desc');
                        }

                        //移除已排序的列的样式,添加样式到当前列
                        $table.find('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
                        $table.trigger('repaginate');
                    });
                }
            });
        });
    });

</script>
<style type="text/css">
.clickable
        {
            text-decoration: underline;
        }
.hover
         {
            background-color: #5dd354;
        }
        .sorted
        {
            background-color: #FFF8DC;
        }
        .active
        {
            background-color:#ecfbd4;
            }

</style>

///按上下键光标在行上移动

//前台

//后台cs

private int _i=0;
        protected void grid_RowBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        string strGvName = "_ctl0_cph_body_GridView1";
        e.Row.Attributes.Add("id", strGvName + _i.ToString());
        e.Row.Attributes.Add("onKeyDown", "SelectRow(event,'" + strGvName + "');");
        e.Row.Attributes.Add("onClick", "MarkRow(" + _i.ToString() + ",'" + strGvName + "');");
        e.Row.Attributes.Add("tabindex", "0");
        _i++;
    }

<asp:GridView runat="server" ID="GridView1" OnRowDataBound="grid_RowBound">
</asp:GridView>

///上下移动行并保存DB

<head>
    <title>表格数据上下行互换位置</title>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        //上移
            $("input.upbtn").each(function () {
                $(this).click(function () {
                    var $tr = $(this).parents("tr");
                    if ($tr.index() != 0) {
                        $tr.prev().before($tr);
                    }