Skip to content

Instantly share code, notes, and snippets.

@jbrooksuk

jbrooksuk/gist:1004154

Created June 2, 2011 09:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jbrooksuk/1004154 to your computer and use it in GitHub Desktop.
Save jbrooksuk/1004154 to your computer and use it in GitHub Desktop.
Download ZIP
Table rows/cols selection
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery RTE Dynamic Table Insertion Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
.aBlock {
width: 20px;
height: 20px;
background-color: #A9EDF5;
}
.selBlock {
background-color: #1CE8CD !important;
}
.clickBlock {
background-color: #0AF2D3;
}
</style>
<script type="text/javascript">
$(function() {
/* Where we're at */
var col = 0;
var row = 0;
var tblArray = $('table#makeMe tr').map(function(){
return [
$('td', this).map(function(){
return $(this);
}).get()
];
}).get();
/* What we have */
var iCols = tblArray.length,
iRows = tblArray[0].length;
var lastX = 0, lastY = 0;
$("table#makeMe td").bind("mouseenter", function() {
row = $(this).parent().parent().children().index($(this).parent());
col = $(this).parent().children().index($(this));
for(var x = 0; x <= row+1; x++) {
for(var y = 0; y <= col+1; y++) {
if(x > row || y > col) {
$(tblArray[x][y]).removeClass("selBlock");
} else {
$(tblArray[x][y]).addClass("selBlock");
}
}
}
});
$("table#makeMe td").bind("click", function() {
row = $(this).parent().parent().children().index($(this).parent());
col = $(this).parent().children().index($(this));
/* Loop each table > tr > td and remove .clickBlock */
$('table#makeMe tr').map(function(){
$('td', this).map(function(){
$(this).removeClass("clickBlock");
});
});
if(row == lastX && col == lastY) {
/* Reset the last X, Y co-ordinates */
lastX = 0;
lastY = 0;
}else{
/* Where we last clicked */
lastX = row;
lastY = col;
for(var x = 0; x <= row; x++) {
for(var y = 0; y <= col; y++) {
if((x != row || y != col) && $(tblArray[x][y]).hasClass("clickBlock")) {
} else {
$(tblArray[x][y]).addClass("clickBlock");
}
}
}
}
});
/* Remove hover blocks when the mouse leaves */
$("table#makeMe").bind("mouseleave", function() {
$(this).find("td").each(function() {
if($(this).hasClass("selBlock")) {
$(this).removeClass("selBlock");
}
});
});
});
</script>
</head>
<body>
<table id="makeMe" cellspacing="5">
<tr>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
</tr>
<tr>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
</tr>
<tr>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
</tr>
<tr>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
</tr>
<tr>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
<td class="aBlock"></td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment