javascript - 从javascript将html表格单元格制作成html输入字段

Question

在程序中，用户输入一个数字，然后显示该数字的乘法表（例如：userInput=13 ==> 出现 13 次乘法表（参见下面的 img 示例））。我需要 javascript 在表格中随机选择一个单元格并将其更改为输入字段，但我所有的尝试都失败了。谢谢！LMK，如果你想要更多的解释。

EX：13 次表 https://nicholasacademy.com/multiplicationto13chart.gif

//change userInput into a number
var userInput = document.getElementById("userInput");
console.log("userInput", userInput);
var valUserInput = parseInt(userInput.value);

console.log(valUserInput);

console.log(valUserInput);

function table_function() {

  var userInput = document.getElementById("userInput");

  var valUserInput = parseInt(userInput.value);

  console.log(valUserInput + 1);

  var color;

  document.write("<div style='text-align:center;'>");
  document.write("<h1>Multiplication table game</h1>");
  document.write("<h2>By: Lauren Cerino, Nate Divine, Zack Beucler</h2>");
  document.write("<form> Please enter a number below 20: <input type='number' id='userInput' name='name' value=''> ");
  document.write("<button type='button' onclick=table_function()>Multiply!</button> </form>");
  document.write("</div>");


  document.write('<table border="1px"; align="center";>');

  for (var i = 1; i < valUserInput + 1; i++) {
    document.write("<tr style='height:45px;'>");

    for (var j = 1; j < valUserInput + 1; j++) {

      var randomCell = Math.floor(Math.random() * valUserInput);
      if (i === randomCell || j === randomCell) {
        document.write("<td style='width:45px;background-color:" + color + ";' align='center'>" + document.write("<input type='number' id='cell' name='name' value=''>") + "</td>")
      }
      if (j == 1 || i == 1) { // current iteration through i or j * 1 will be colored
        color = "#4286f4";
      } else {
        color = "#fff";
      }
      document.write("<td style='width:45px;background-color:" + color + ";' align='center'>" + j * i + "</td>");
    }
    document.write("</tr>");
  }
  document.write("</table>");
}

<input id="userInput" onchange="table_function()" />

标签： javascripthtmlcss

Answer 1

好吧，我对此进行了尝试，这就是我想出的：

要创建随机输入，我所做的是将单元格的位置存储在 table 单元格的 data 属性中 position i_j。您可以通过以下方式计算单元格的随机位置：

var i = Math.floor(Math.random()*(input+1));
var j = Math.floor(Math.random()*(input+1));

其中input是在文本框中输入的值，以首先生成表格。这+1是因为地板功能是包容性的。

您可以通过以下方式引用要放入随机输入的单元格： document.getElementById(i+'_'+j)。您将在代码中清楚地看到这一点。

如果你选择，你可以做一个单一的功能，但为了简单起见，我把它分解成不同的功能，这样更容易阅读。如果您对某事有疑问并且不确定，请询问。尽管我认为，这应该为您尝试到达的位置提供一个很好的起点。

您还可以在此处参考一个小提琴：

https://jsfiddle.net/xh8by90g/

HTML

<div>
  <h1>Multiplication Table Game</h1>
  <p>
    Enter a Number Less than 20
  </p>
  <input type="text" id="inputNumber" name="inputNumber" /> 
  <button type='button' id='startGame'>
    Multiply!
  </button>
</div>

Javascript

var MAX = 20;

var button = document.getElementById('startGame');

button.addEventListener('click', function(e){
    var oldTable = document.getElementById('multipleTable');
  if(oldTable){
    oldTable.parentNode.removeChild(oldTable);
  }

    var input = document.getElementById('inputNumber').value;
  if(input < MAX){
    var table = document.createElement('table');
    table.setAttribute('id', 'multipleTable');
    table.appendChild(createTableHeader(input));
    for(var i = 0; i <= input; i++){
        var tr = document.createElement('tr');
        var td = document.createElement('td');
      td.innerHTML = i;
      tr.appendChild(td);
      for(var j = 0; j <= input; j++){
        td = document.createElement('td');
        td.innerHTML = '';
        td.setAttribute('id', i+'_'+j);
        td.setAttribute('data-product', i*j);
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
    document.body.appendChild(table);
    createRandomInput(input, table);
  }
});

function createRandomInput(input, table){
    var i = Math.floor(Math.random()*(parseInt(input)+1));
  var j = Math.floor(Math.random()*(parseInt(input)+1));
  var rand = document.getElementById(i+'_'+j);
  var box = document.createElement('input');
  box.style.width = '25px';
  rand.appendChild(box);
}

function createTableHeader(input){
    var tr = document.createElement('tr');
  var td = document.createElement('td');
  td.innerHTML = "X";
  tr.appendChild(td);
  for(var i = 0; i <= input; i++){
    td = document.createElement('td');
    td.innerHTML = i;
    tr.appendChild(td);
  }
  return tr;
}