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;

原文地址:https://www.cnblogs.com/Hard/p/2556410.html