zoukankan      html  css  js  c++  java
  • table滑动选择行及从表记录对应js代码

    效果如上图:

    当光标离开表格时从表记录要和选中行对应,

    并且通过单击行改变从表,使用了js中的mouseout及mouseover事件,代码如下:

     var index = 0;
                $('#tenantGrid tbody tr').bind('mouseover', function () {
                    $('#tenantGrid tbody tr').each(function (i) {
                        if (i % 2 == 0) {
                            $(this).css('background-color', '#FFFFFF');
                        }
                        else {
                            $(this).css('background-color', '#F2F2F2');
                        }
                    });
                    $(this).css('background-color', '#FBEC88'); $(this).css('cursor', 'pointer');
                }).bind('mouseout', function () {
                    if ($(this)[0].rowIndex % 2 == 0) {
                        $(this).css('background-color', '#FFFFFF');
                    }
                    else {
                        $(this).css('background-color', '#F2F2F2');
                    }
                    $('#tenantGrid tbody tr:eq(' + index + ')').css('background-color', '#FBEC88');
                }).bind('click', function () {
                    $('#AllocatorsDiv').load('/BasicInfo/HCAllocatorDetail?tenantID=' + $(this).find('td:first').find('input:hidden').val());
                    index = $(this)[0].rowIndex - 1;
                });

     


    作者:Qubook
    出处:http://www.cnblogs.com/hard/
    版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
    联系方式: 个人QQ  1005354833;

  • 相关阅读:
    set集合 浅层拷贝会和深层拷贝
    "is"与"=="
    元组和字典
    运算符和列表
    Python 基础语法
    supervisor 安装配置详解
    如何运行vue项目
    过目不忘JS正则表达式
    vue Bus总线
    Robot Framework 环境安装(一)
  • 原文地址:https://www.cnblogs.com/Hard/p/2556410.html
Copyright © 2011-2022 走看看