JSFiddle - React, Tailwind, and code Playground

by webviper

CSS

table {
	border-collapse: collapse;
}
td {
	width: 20px;
	height: 20px;
	border: 1px solid #FFF;
}
.black {
	background-color: #000;
}

JavaScript

$(function(){
	var x = prompt("Enter a positive integer:");

	$('body').prepend(createTable(x));
	tableMarkup(x);

	function createTable(x){
		var FACTOR = 3;
		var str = '';
		var row = '';
		var n = FACTOR * x;
		
		for (var i = n; i--;) {
			row = '';
			for (var cell = n; cell--;) {
				row += '<td></td>';
			}
			str += '<tr>'+ row +'</tr>';
		}
		str = '<table id="table">'+ str +'</table>';
		return str;
	}	
	
	function tableMarkup(x){
		var FACTOR = 3;
		var n = FACTOR * x;
		
		for (var i = n; i--;) {
			$('tr:eq('+ i +') td').filter(function(){
				return ($(this).index() + i) % 3 == 0;
			}).addClass('black');
		}
        
		$('tr:first td').filter(function (){
			return $(this).index() % 6 == 1;
		}).addClass('black').next().next().removeClass('black');
        
		$('tr').filter(function (){
			return ($(this).index() - 2) % 6 == 2;
		}).find('td:first').addClass('black').end().next().next().find('td:first').removeClass('black');
        
		$('tr').filter(function (){
			if (x % 2 == 0) {
				return ($(this).index() - 1) % 6 == 2;
			} else {
				return ($(this).index()) % 6 == 0;
			}			
		}).find('td:last').addClass('black').end().prev().prev().find('td:last').removeClass('black');
        
		$('tr:last td').filter(function (){
			if (x % 2 == 0) {
				return $(this).index() % 6 == 0;
			} else {
				return ($(this).index() - 1) % 6 == 2;
			}
		}).addClass('black').prev().prev().removeClass('black');
		
		$('tr:last td:first, tr:first td:last').removeClass('black');
	}
		
});