Array to Grid using a table

I have been doing some personal projects for fun and most of them have visual representation of boards (ej: sudoku solvers, chess PGN viewer, etc) and I always end up doing something like this:

var wid=10;
var hei=6;
var len=(wid*hei);
var map="005000200000000008000600000006000700000040000000500030400000".split("");

var str="";

for(var i=0;i";
    }
    str+=""+((map[i]!=0)?map[i]:" ")+"";
}

str+="";

document.body.innerHTML+=str;

with CSS styles like:

*{margin:0;padding:0;}
#board{margin:15px auto;text-align:center;}
#board,#board td{border:1px solid #000;}
#board td{width:45px;height:47px;font-size:20px;}

I want to know if there is a better, more readable way to achieve this?, maybe using arr.join()?

Despite already having accepted an answer, I'd like to point out a different way to approach this.

Since you are building the board with JavaScript I'm assuming that you want to modify the content of the board dynamically. (If not then the question would be why you are using JavaScript and not a server-side generation).

In that case it could make sense to separate generation and filling the board. That way you could simply exchange each method without affecting the other.

For generation you could continue to use your solution just with empty or default values, or use DOM generation:

var rowCount = 6;
var colCount = 10;
var board = document.createElement('table');
for (var r = 0; r < rowCount; r++) {
  var row = board.insertRow();
  for (var c = 0; c < colCount; c++) {
    row.insertCell();
  }
}

Or simply use static HTML.

And then you write a function that sets the value of a cell which will work no matter how you created the board. Something like:

function setBoardValue(board, x, y, value) {
   board.rows(y).cells(x).innerHTML = value;
}

And then you can loop over your "map" in anyway you like and call it:

var map="005000200000000008000600000006000700000040000000500030400000".split("");

for (var i=0;i<len;i++){
  setBoardValue(board, i % colCount, Math.floor(i / rowCount), map[i] != 0 ? map[i] : " ");
}

In the end this solution if technically slower that your solution, but usually not in an amount that would be noticeable by the user and you have an advantage with the separation of the concerns.

StackExchange Code Review Q#10875, answer score: 5