Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<form name="myForm" method="post">
        <label>Row & Columns Number</label>
        <br/>
        <input type="number" name="board" value="10" placeholder="Number of rows">
        <br/><br/>
        <label>Number of selected cells</label>
        <br/>
        <input type="number" name="myNumb" value="10" placeholder="Number of selected cells">
        <br/><br/>
        <input type="button" value="submit" onclick="tableMatrix()">
    </form>
    <div id="myContainer"></div>
</body>
</html>
 
 function shuffle(array) {
      var currentIndex = array.length, temporaryValue, randomIndex ;
      // While there remain elements to shuffle...
      while (0 !== currentIndex) {
        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;
        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }
      return array;
    }
      function fillCells(value, len) {
        var arr = [];
        for (var i = 0; i < len; i++) { if(i<value){
          arr.push(1);}else{arr.push(0);}
        }
        shuffle(arr);
        return arr;
      }
        function tableMatrix () {
      //taking values from the form
        var board = document.forms["myForm"]["board"].value;;
        var myNumb = document.forms["myForm"]["myNumb"].value;
        var zero = 0;
        var one = 1;
        var totalCell = board*board;
       var cellValues =  fillCells(myNumb, totalCell)
    //finding myContainer
    var myContainer = document.getElementById('myContainer');
        myContainer.innerHTML = '';
    //creating element <table>
      var table = document.createElement('table');
      table.style.width = '100%';
      table.setAttribute('border', '1');
      //creating element <tbody>
      var tbody = document.createElement('tbody');
      //generate random number
      var x = 0;
      //cells creation
      for (var i = 0; i < board; i++) {
        //creating <tr> element
          var tr = document.createElement('tr');
          for (var j = 0; j < board; j++) {
            //creating <td> element
                var td = document.createElement('td');
                //put <td> after <tr> element
                tr.appendChild(td);
                td.setAttribute('class', 'tblCells');
                
                td.innerHTML = '<span>'+cellValues[x]+'</span>';
                x++;
          }
          //put <tr> after <tbody> element
          tbody.appendChild(tr);
      }
      //put <tbody> after <table> element
      table.appendChild(tbody);
      //put <table> after <div> element
      myContainer.appendChild(table);
  }
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers