<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>drag table</title>
<style>
table {
/*border: 1px solid #333333;*/
}
th {
border-bottom: 1px solid #333333;
}
td {
width: 50px;
height: 30px;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
text-align: center;
position: relative;
}
td.bgColor {
background-color: rgba(119, 119, 119, 0.3);
cursor: pointer;
}
tr td:first-child {
border-left: 1px solid #333333;
}
span {
display: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #FF8C80;
}
span.active {
display: block;
position: absolute;
top: 0px;
left: 0px;
transform: translate(100%, 50%);
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th colspan="8">drag table</th>
</tr>
</thead>
<tbody>
<tr id="0">
<td>00</td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr id="1">
<td onselectstart="return false" onselect="document.selection.empty()">99</td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr id="2">
<td>99</td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr>
<td>99</td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr>
<td>99</td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
<tr>
<td>99</td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
<td><span></span></td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var StartId = null;
var StartIndex = null;
var EndId = null;
var EndIndex = null;
var tdJson = [];
var drawing = false;
$(‘td‘).bind(‘mousedown‘, function() {
drawing = true;
$(this).addClass(‘bgColor‘);
var y = $(this).index();
var x = $(this).parent().index();
StartIndex = {
x: x,
y: y
};
});
$(‘td‘).bind(‘mouseover‘, function() {
if(drawing) {
$(this).addClass(‘bgColor‘);
//获取鼠标移入td的索引
//var data = {};
// var y = $(this).index();
//var x = $(this).parent().index();
//data[‘trIndex‘] = x;
//data[‘tdIndex‘] = y;
//tdJson.push(data);
} else {
drawing = false;
}
});
$(‘td‘).bind(‘mouseup‘, function() {
drawing = false;
$(‘table td‘).removeClass(‘bgColor‘);
var y = $(this).index();
var x = $(this).parent().index();
EndIndex = {
x: x,
y: y
};
SelectTD(StartIndex, EndIndex, ‘green‘);
});
});
function SelectTD(StartIndex, EndIndex, Color) {
var MinX = null;
var MaxX = null;
var MinY = null;
var MaxY = null;
if(StartIndex.x < EndIndex.x) {
MinX = StartIndex.x;
MaxX = EndIndex.x;
} else {
MinX = EndIndex.x;
MaxX = StartIndex.x;
}
if(StartIndex.y < EndIndex.y) {
MinY = StartIndex.y;
MaxY = EndIndex.y;
} else {
MinY = EndIndex.y;
MaxY = StartIndex.y;
}
StartIndex = {
x: MinX,
y: MinY
};
EndIndex = {
x: MaxX,
y: MaxY
};
for(var i = MinX + 1; i <= MaxX + 1; i++) {
var SelectTR = $(‘table tr‘).eq(i);
for(var j = MinY; j <= MaxY; j++) {
if(j != 0) {
$(‘table tr‘).eq(i).find(‘td:eq(‘ + j + ‘) span‘).toggleClass(‘active‘);
}
}
}
}
</script>
