jQuery 在表格内实现鼠标拖动选取格子_jquery table 鼠标拖动选择-优快云博客

本文链接：https://blog.youkuaiyun.com/wangzunitian/article/details/103365752

通过监听mousedown，mouseup事件实现鼠标按住移动选取范围

<style type="text/css">
#fa {
	margin: 100px auto;
}
.td_change{
	background-color:black;
	opacity:0.5;
}
</style>
<body>
	<div id="fa"></div>
</body>
<script type="text/javascript">
    $(function() {
        //随便生成一个30*30的表格
		var table = document.createElement("table");
		var tbody = document.createElement("tbody");
		table.style.borderCollapse = "collapse";
		for (var i = 0; i < 30; i++) {
			var tr = document.createElement("tr");
			for (var j = 0; j < 30; j++) {
				var td = document.createElement("td");
				var text = document.createTextNode("");
				td.style.border = "1px solid ";
				td.style.padding = "10px";
				td.lang='('+i+','+j+')';//格子坐标
				td.appendChild(text);
				tr.appendChild(td);
			}
			table.appendChild(tr);
		}
		document.getElementById("fa").appendChild(table);

        var downVal = '';
		$('td').live('mousedown',function(v){
            //保存起点位置
			downVal = $(this).attr('lang');
		});

        $('td').live('mouseup',function(v){
            //结束位置
			var upVal = $(this).attr('lang');
			if(downVal){
				var downX = downVal.split(',')[0];
				downX = parseInt(downX.substring(1,downX.length));
				var downY = downVal.split(',')[1];
				downY = parseInt(downY.substring(0,downY.length-1));
					
				var upX = upVal.split(',')[0];
				upX = parseInt(upX.substring(1,upX.length));
				var upY = upVal.split(',')[1];
				upY = parseInt(upY.substring(0,upY.length-1));
				
				var xStar = downX;
				var xEnd = downX;
				var yStar = downY;
				var yEnd = downY;
				if(downX < upX){
					xStar = downX;
					xEnd = upX;
				}else{
					xStar = upX;
					xEnd = downX;
				}
					
				if(downY < upY){
					yStar = downY;
					yEnd = upY;
				}else{
					yStar = upY;
					yEnd = downY;
				}
				for(var i = xStar ; i < xEnd+1 ; i ++){
					for(var j = yStar ; j < yEnd+1; j ++){
						if($('td[lang=\'('+i+','+j+')\']').hasClass('td_change')){
							$('td[lang=\'('+i+','+j+')\']').removeClass('td_change');
						}else{
							$('td[lang=\'('+i+','+j+')\']').addClass('td_change');
						}
				    }
				}
				downVal = '';
				}else{
					if($(this).hasClass('td_change')){
						$(this).removeClass('td_change');
					}else{
						$(this).addClass('td_change');
					}
				}
			}); 
    })
</script>