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;
            });

 

 

 
posted @ 2012-06-20 16:12  Qubook  阅读(1155)  评论(0编辑  收藏  举报