最近碰到一個表格的增刪問題，一個主要的問題在於需要用鼠標拖拽去選中區域，然后對選中的區域進行操作。在網上找了些代碼，做了個總結。原理是在鼠標剛開始點擊的點和鼠標移動的點，兩個點之間生成一個矩形，然后用這個矩形去和表格中的td進行碰撞檢測，但是因為是表格，當然會有行合並和列合並的問題。我的思路是使用遞歸函數，在每一次矩形和表格碰撞完之后，重新改變矩形的定位和寬高，然后再進行碰撞檢測，直到達到某個條件時，停止。我在每個和矩形塊碰撞到的td上加了一個class(grayColor),然后循環遍歷，需要取到4個值，最小的距離上邊框的距離(offset().top)、最大的距離上邊框的距離(offset().top+outerHeight())、最小的距離左邊框的距離(offset().left)、最大的距離左邊框的距離(offset().left+outerWidth),然后對矩形塊更新，寬度為最大距離左邊框的距離減去最小的距離，高度同理，top值為最小的距離上邊框的值，left值同理，然后再去和table內的td去做碰撞檢測，直到后一次和前一次的所有距離相等，即兩次的最小距離上邊框的值、最大距離上邊框的值、最小距離左邊框的值、最大距離左邊框的值都相等時，函數停止執行。這樣做的好處是，不需要去考慮colspan的值和rowspan的值，反正我找的用colspan和rowspan的做處理的，我沒有看懂，畢竟，我是一只小菜鳥。下面貼上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
td {
width: 200px;
height: 50px;
border: 1px solid #D9D9D9;
}
.grayColor {
background: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<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>
<td></td>
</tr>
</table>
</body>
<script src="jquery.min.js"></script>
<script>
$('table').on('mousedown', 'td', function(e) {
$('.grayColor').removeClass('grayColor');
var startLeft = e.clientX;
var startTop = e.clientY;
var thatTd_ = $(this);
$(document).on('mousemove', function(e) {
var moveLeft = e.clientX;
var moveTop = e.clientY;
// 動態生成選擇區域時占位的碰撞檢測塊
crashPlaceholder(moveLeft, moveTop, startLeft, startTop);
// 元素碰撞檢測
elementCrash();
// 處理有表格合並之后的的選擇問題 通過檢測高度來實現效果
formMergeChoice(moveLeft, moveTop)
});
e.stopPropagation();
})
// 鼠標抬起事件
$(document).on('mouseup', function(e) {
$(document).unbind('mousemove');
$('.show').remove();
e.stopPropagation();
});
// 生成占位塊
function crashPlaceholder(A, B, C, D) {
// 開始的行列
var a = A > C ? C : A;
var b = B > D ? D : B;
$('.show').remove();
$('body').append('<div class="show"></div>');
$('.show').css('width', Math.abs(A - C)).css('height', Math.abs(B - D)).css('position', 'fixed').css('left', a).css(
'top', b).css('border', '1px dotted black');
}
// 碰撞檢測
function elementCrash() {
$('table td').each(function() {
$(this).removeClass('grayColor');
// 碰撞檢測
var t1 = $(this).offset().top;
var l1 = $(this).offset().left;
var r1 = $(this).offset().left + $(this).innerWidth();
var b1 = $(this).offset().top + $(this).innerHeight();
var t2 = $('.show').offset().top;
var l2 = $('.show').offset().left;
var r2 = $('.show').offset().left + $('.show').innerWidth();
var b2 = $('.show').offset().top + $('.show').innerHeight();
if (b1 < t2 || l1 > r2 || t1 > b2 || r1 < l2) {
$(this).removeClass('grayColor');
} else {
$(this).addClass('grayColor');
}
})
}
// 處理有表格合並之后的的選擇問題 通過檢測高度來實現效果
function formMergeChoice() {
var heightArr = [],
heightArr1 = [],
widthArr = [],
widthArr1 = [];
$('.grayColor').each(function() {
heightArr.push($(this).offset().top);
heightArr1.push($(this).offset().top + $(this).outerHeight());
widthArr.push($(this).offset().left);
widthArr1.push($(this).offset().left + $(this).outerWidth());
})
var minHeight = Math.min.apply(null, heightArr);
var maxHeight = Math.max.apply(null, heightArr1);
var minWidth = Math.min.apply(null, widthArr);
var maxWidth = Math.max.apply(null, widthArr1);
$('.show').outerHeight(maxHeight - minHeight - 3).outerWidth(maxWidth - minWidth).css('top', minHeight).css('left', minWidth);
// 當改變碰撞占位檢測塊之后的高度和定位之后 再次進行碰撞檢測
elementCrash();
$('.grayColor').each(function() {
heightArr.push($(this).offset().top);
heightArr1.push($(this).offset().top + $(this).outerHeight());
widthArr.push($(this).offset().left);
widthArr1.push($(this).offset().left + $(this).outerWidth());
})
var minHeight1 = Math.min.apply(null, heightArr);
var maxHeight1 = Math.max.apply(null, heightArr1);
var minWidth1 = Math.min.apply(null, widthArr);
var maxWidth1 = Math.max.apply(null, widthArr1);
// 遞歸函數
if (minHeight == minHeight1 && maxHeight == maxHeight1 && minWidth == minWidth1 && maxWidth == maxWidth1) {
return;
} else {
formMergeChoice();
}
}
</script>
</html>