table选中单元格区

最新推荐文章于 2024-08-04 10:53:30 发布

很溜

最新推荐文章于 2024-08-04 10:53:30 发布

阅读量512

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/zhanzhan666666/article/details/108843143

版权

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  
<style>  
.tb{  
    cellspacing:0px;  
    border-spacing: 0px;  
    border:1px solid #000;  
}  
.tb td{  
    width:100px;  
    height:50px;  
    border:1px solid #000;  
}  
th{  
    width:100px;  
    height:50px;  
    border:1px solid #ddd;  
    background: #eee;
}  
.td_bg{  
    background:#FFAA00;  
}  
</style>  
<script>  
//table 鼠标连续选中
var mouse_begin={x:0,y:0};  
var mouse_end={x:0,y:0};  
$(function(){  
    init();  
    $("body").mousedown(function(){  
    $(".tb td").removeClass('td_bg');//点击表格之外的部分，清空所有选中  
    })  
})  
  
function init(){  
    mouseDown();  
    mouseUp();  
	
}  
 
function mouseDown(){  
    $(".tb td").mousedown(function(e){  
        e.stopPropagation();//阻止继承父元素document的mousedown事件  
		
        mouse_begin={
			x:$(this).parent().parent().find("tr").index($(this).parent()[0]), //获得 初始 tr index  (行)
			y:$(this).parent().find("td").index($(this)[0])   				   //获得 初始 td index  (列)
		};  
		
        $(".tb td").removeClass('td_bg');//清空所有选中  
        $(this).addClass('td_bg');  
        mouseMove();   
    });  
}
   
function mouseMove(){  
    $(".tb td").mouseover(function(){  
		
        $(".tb td").removeClass('td_bg');//清空所有选中  
        mouse_end={
			x:$(this).parent().parent().find("tr").index($(this).parent()[0]),  //获得 移入 tr index  (行)
			y:$(this).parent().find("td").index($(this)[0])    					//获得 移入 td index  (列)
		};  
			
        var maxX = mouse_begin.x<mouse_end.x?mouse_end.x:mouse_begin.x;   //判断最大行
        var minX = mouse_begin.x<mouse_end.x?mouse_begin.x:mouse_end.x;   //判断最小行
        var maxY = mouse_begin.y<mouse_end.y?mouse_end.y:mouse_begin.y;   //判断最大列
        var minY = mouse_begin.y<mouse_end.y?mouse_begin.y:mouse_end.y;   //判断最小列
        for(var i=minX;i<=maxX;i++){  
            for(var j=minY;j<=maxY;j++){  
                $(".tb tr:eq("+i+") td:eq("+j+")").addClass('td_bg');  
            }  
        }  
        //$(this).addClass('td_bg');  
    });  
}  
 
function mouseUp(){  
    $(".tb td").mouseup(function(){  
        $(".tb td").unbind('mouseover');  
    });  
}  
</script> 
 
<body>  
        
<table onselectstart="return false;">  
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody id="tb" class="tb">
        <tr>  
            <td>2</td>
            <td>23</td>
            <td>3</td>
            <td>4</td>  
        </tr>  
        <tr>  
            <td>哈哈</td>
            <td>哈哈</td>
            <td>哈哈</td>
            <td>哈哈</td>  
        </tr>  
        <tr>  
            <td></td>
            <td></td>
            <td></td>
            <td></td>  
        </tr>  
        <tr>  
            <td></td>
            <td></td>
            <td></td>
            <td></td>  
        </tr>  
    </tbody>
</table>  
</body>