JavaScript - store a grid of numbers

Question

I want to generate a grid of numbers (10 x10) where the top row will be numbers 1-10 in a random order and the first column will be 1-10 in a random order. The numbers inside will be calculated in a various ways based on those numbers on the edges. My question is about organisation/structure of this data. What would be the best way for accessing and doing calculations on them across rows/columns. Would it be 10 arrays holding 10 elements each or json object? I am stuck as i initially only the toprow and first column will be randomly generated. The rest of numbers on the grid will be calculated. Please advise how to approach it. Thank you

Answer 1

I left the calculations of the individual cells up to you

I used a shuffle function referenced in this post shuffle

var hdrAry = new Array(), hdrAry2 = new Array(), tenCols = "<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>";
function shuffle(array) {
  // [shuffle](https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)
  var currentIndex = array.length, temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

function buildHead(table_id) {
   buildArys();
   $('table#'+table_id).html('<thead><tr><th></th></tr></thead><tbody>');
  for(i=0; i<10; i++){
    $('table#'+table_id+' thead tr').append('<th class="text-center">'+hdrAry[i]+'</th>');
    $('table ').append('<tr><th>'+hdrAry2[i]+'</th>'+tenCols+'</tr>')
  }
   $('table#'+table_id).append('</tbody>');
}

function buildArys(){
  //clear the arrys 1st
  hdrAry = [];
  hdrAry2 = [];
  //add numbers 1-10 to both arrays
  for(j=1; j<11; j++){
     hdrAry.push(j);
     hdrAry2.push(j);
  }
  //now shuffle them up
  shuffle(hdrAry);
  shuffle(hdrAry2);
}

$(document).ready(function() {
  buildHead('sb');
})

th{
  width:40px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test" onclick="buildHead('sb')">Generate Header</button>
<table border=1 id="sb" class="table  table-bordered table-striped" >
</table>