Dancing Links in Javascript

function solveRecursively(n, showSteps) {
    var r = n, c = n, allPositions,
        steps = [];

    function initializePositions() {
        var i, j;
        allPositions = [];
        for (i = 0; i < r; i++) {
            for (j = 0; j < c; j++) {
                allPositions.push({
                    r: i,
                    f: j,
                    a: i + j,
                    b: n - 1 - j + i,
                    //To get our placements the same as the DLX one...
                    toString: function() {
                        return "R"+this.r+" F"+this.f+" A"+this.a+" B"+this.b;
                    }
                });
            }
        }
    }

    function placePiece(availablePositions, position) {
        return availablePositions.
            filter(function(v) {
                return v.r !== position.r &&
                    v.f !== position.f &&
                    v.a !== position.a &&
                    v.b !== position.b;
            });
    }

    function testSolution(availablePositions, candidate) {
        if (showSteps)
            steps.push(candidate);

        if (availablePositions.length) {
            var childSolutions = [];
            for (var p = 0; p < Math.min(n, availablePositions.length); p++) {
                var position = availablePositions[0],
                    remainingPositions = placePiece(availablePositions,
                                                    position),
                    recurseResults = testSolution(remainingPositions,
                                                  candidate.concat(position));

                    availablePositions = availablePositions.slice(1);
                    childSolutions = childSolutions.concat(recurseResults);
            }
            return childSolutions;
        } else if (candidate.length === n) {
            return [ candidate ];
        }
        return [];
    }

    initializePositions();
    var solutions = testSolution(allPositions, []);
    if (showSteps)
        return steps;
    return solutions;
}

document.body.appendChild(makeVisualization(N, solveWithDancingLinks));

function element(name, children) {
    var el = document.createElement(name), i;
    if (children) {
        for(i = 0; i < children.length; i++) {
            var child = children[i];
            if (typeof child === "string") {
                el.appendChild(document.createTextNode(child));
            } else {
                el.appendChild(child);
            }
        };
    }
    return el;
}
function div()   { return element("div", arguments);   }
function table() { return element("table", arguments); }
function tbody() { return element("tbody", arguments); }
function tr()    { return element("tr", arguments);    }
function td()    { return element("td", arguments);    }
function span()  { return element("span", arguments);  }
function withAttribute(element, attr, value) {
    element.setAttribute(attr, value);
    return element;
}
function withClassname(element, cls) {
    return withAttribute(element, "class", cls);
}
function withMouseMoveListener(element, listener) {
    element.onmouseover = listener;
    return element;
}
function slider() {
    return withAttribute(
        withAttribute(element("input"), "type", "range"),
        "min", "0");
}


function makeVisualization(n, method) {
    var board = makeBoard(n),
        input = slider(),
        curState = span(),
        states = method(n, true);

    input.setAttribute("max", states.length - 1);
    curState.innerHTML = "0 / " + (states.length - 1);
    input.value = 0;
    input.oninput = function () {
        curState.innerHTML = input.value + " / " + (states.length - 1);
        clearQueens(board);
        states[input.value].forEach(function (s) {
            placeQueen(board, "."+s.toString().trim().replace(/ /g, '.'));
        });
    }

    return withClassname(div(curState, board, input), "visualization");
}

function makeBoard(n) {
    var r = n, c = n;
    var rows = tbody();
    for (var i = 0; i < r; i++) {
        var row = tr();
        rows.appendChild(row);
        for (var j = 0; j < c; j++) {
            var cell = td();
            var cls = "";
            cls += " R"+i;
            cls += " F"+j;
            cls += " A"+ (i + j);
            cls += " B"+ (n - 1 - j + i);
            cell.setAttribute("class", cls.trim());
            row.appendChild(cell);
        }
    }
    return withMouseMoveListener(withClassname(table(rows),
                                               "chessboard"),
                                 hoverListener);
}

function clearHighlight(board, cls) {
    var i, cells = board.querySelectorAll('.'+cls);
    for (i = 0; i < cells.length; i++) {
        var cell = cells[i];
        cell.setAttribute("class",
                          cell.getAttribute("class")
                          .replace(new RegExp(cls, 'g'), "").trim());

    };

}

function getAttackingClasses(cls) {
    if (! cls)
        return null;

    cls = cls.replace(/.*(R.*B\d+).*/, "$1");
    cls = cls.replace(/((R|F|A|B)\d+)/g, ".$1");
    cls = cls.replace(/ /g, ",");
    return cls
}

function highlight(parent, cls, highlightCls) {
    if (! highlightCls)
        highlightCls = "highlight";
    var i, cells = parent.querySelectorAll(cls);
    for (i = 0; i < cells.length; i++) {
        var cell = cells[i],
            curCls = cell.getAttribute("class");
        if (curCls.indexOf(highlightCls) === -1) {
            cell.setAttribute("class",
                              curCls + " " + highlightCls);
        }
    }
}

function hoverListener(e) {
    if (e.target.tagName === 'TD' &&
        e.target
        .parentElement
        .parentElement
        .parentElement.getAttribute("class") === "chessboard") {
        var rows = e.target.parentElement.parentElement;
        clearHighlight(rows, 'highlight');
        var toggleCls = getAttackingClasses(e.target.getAttribute("class"));
        if (toggleCls) {
            highlight(rows, toggleCls);
        }
    }
}

function placeQueen(board, posSelector) {
    var position = board.querySelector(posSelector);
    //Yes, this is the unicode for the queen symbol...
    position.appendChild(document.createTextNode("\u2655"));
    var highlightCls = getAttackingClasses(position.getAttribute("class"));
    highlight(board, highlightCls, 'attacked');
}

function clearQueens(board) {
    var i, cells = board.querySelectorAll("td");
    for (i = 0; i < cells.length; i++) {
        var td = cells[i];
        if (td.firstChild)
            td.removeChild(td.firstChild);
    };
    clearHighlight(board, 'attacked');
}

div.visualization {
  text-align: center;
}

table.chessboard {
  margin: auto;
  margin-bottom: 1em;
}
table.chessboard td {
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1em;
  border: solid thin black;
}
.highlight {
  background-color: #FAA;
}
.attacked {
  background-color: #F66;
}
.solution {
  background-color: grey;
}
input[type='range'] {
  -webkit-appearance: none;
  border-radius: 5px;
  box-shadow: inset 0 0 5px #333;
  background-color: #999;
  height: 10px;
  vertical-align: middle;
}