javascript - 用js选择随机表格单元格

Question

首先我有一个表单，有2个board字段和myNumb，board是控制表格大小的数字。 myNumb 是应随机选择的单元格数量。

我正在尝试使用 JavaScript 选择随机表格单元格。我有一个整数变量 myNumb，我将在其中给出应选择多少个随机单元格。在选定的单元格中，我想输入 1，其余的输入 0。我已经构建了表格的结构，但不知道如何选择随机单元格。任何想法将不胜感激。

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;

    //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');

    //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');

            var x = 0;
            if (x <= myNumb) {
                var randomCounter = Math.floor(Math.random() * 9);
                x += randomCounter;
                td.innerHTML = '<span>'+ one +'</span>';
            } else {
                td.innerHTML = '<span>'+ zero +'</span>';
            }
        }
        //put <tr> after <tbody> element
        tbody.appendChild(tr);
    }
    //put <tbody> after <table> element
    table.appendChild(tbody);
    //put <table> after <div> element
    myContainer.appendChild(table);

}

我还创建了一个 JSFiddle here如果有帮助的话

Answer 1

这是生成您想要的模式的脚本:

 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);
 } 

这是Bin