Skip to content

Instantly share code, notes, and snippets.

@alioguzhan
Created January 5, 2014 15:35
Show Gist options
  • Save alioguzhan/8269628 to your computer and use it in GitHub Desktop.
Save alioguzhan/8269628 to your computer and use it in GitHub Desktop.
td {
background: red;
padding-left: 5px;
padding-right: 5px;
color: white;
font-size: 20px;
font-weight: bold;
width: 40px;
height: 60px;
text-align: center;
}
td.selected{
background: green;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="container" align="center">
</div>
</body>
</html>
var createTable = function() {
var t = $('<table/>');
t.attr('id', 'main');
$('#container').append(t);
};
var createRows = function() {
// creates an empty pattern table (HTML).
var pattern = [[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],
[0,0,0,0,0],[0,0,0,0,0]];
var tr = _.map(pattern, function(arr, index){
var td = _.map(arr, function(elm, i){
var e = $('<td/>');
e.attr('id', index + '' + i);
e.html(0);
return e;
});
var r = $('<tr/>');
r.append(td);
return r;
});
$('#main').append(tr);
};
createLevel = function(limit){
var select = $('<select/>');
select.attr('id', 'level');
_.each(_.range(limit), function(elm, index){
var option = $('<option/>');
option.attr('value', elm+1);
option.html(elm+1);
select.append(option);
});
$('#container').append(select);
};
var getIds = function(){
// returns ids (positions) of selected columns.
var selections = $('#main').find('.selected');
if (selections.length < 1){
alert('Please select some columns');
return false;
}
var ids = _.map(selections, function(elm){
return elm.id;
});
return ids;
};
var createButton = function(){
var b = $('<button/>');
b.attr('id', 'save');
b.html('SAVE THE PATTERN');
$('#container').append(b);
};
createTable();
createRows();
createLevel(5);
createButton();
// DOM READY
$('#main').on('click', 'td', function(elm){
if ($(this).hasClass('selected')){
$(this).removeClass('selected');
$(this).html(0);
return false;
}
$(this).addClass('selected');
$(this).html(1);
return false;
});
$('#save').on('click', function(){
var ids = getIds();
var level = $('#level').val();
var result = [null, null];
//var pattern = JSON.parse(JSON.stringify(pattern));
var pattern = [[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],
[0,0,0,0,0],[0,0,0,0,0]];
_.each(ids, function(elm){
var row = elm[0];
var col = elm[1];
pattern[row][col] = 1;
});
result[0] = pattern;
result[1] = level;
console.log(result);
return result;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment