table滑动选择行及从表记录对应js代码

最新推荐文章于 2024-01-11 13:14:42 发布

aonordcv69558

最新推荐文章于 2024-01-11 13:14:42 发布

阅读量138

点赞数

原文链接：http://www.cnblogs.com/Hard/archive/2012/06/20/2556410.html

版权

效果如上图：

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

并且通过单击行改变从表，使用了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;
            });