alioguzhan/jsbin.OjAvaZIX.css

## jsbin.OjAvaZIX.css
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;
}

## jsbin.OjAvaZIX.html
<!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>

## jsbin.OjAvaZIX.js
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;

});
	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;

	});