从javascript将html表格单元格生成html输入字段

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

例：13倍表

//将userInput更改为数字
var userInput=document.getElementById（“userInput”）；
log（“userInput”，userInput）；
var valUserInput=parseInt（userInput.value）；
控制台日志（valUserInput）；
控制台日志（valUserInput）；
函数表_函数（）{
var userInput=document.getElementById（“userInput”）；
var valUserInput=parseInt（userInput.value）；
控制台日志（valUserInput+1）；
颜色变异；
文件。填写（“”）；
写（“乘法表游戏”）；
文件。书写（“作者：劳伦·塞里诺，内特·斯维德，扎克·比克勒”）；
文件。填写（“请输入20以下的数字：”）；
文件。写（“乘法！”）；
文件。填写（“”）；
文件。写（“”）；
对于（变量i=1；i

---

好吧，我尝试了一下，这就是我想到的：

要创建随机输入，我所做的是将单元格的位置存储在表单元格的数据属性中的位置

I_j

。可以通过以下方式计算单元的随机位置：

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

其中，

输入

是在文本框中输入的值，用于首先生成表格。

+1

是因为地板功能包含在内

您可以通过以下方式引用要放入随机输入的单元格：

document.getElementById（i+“”+j）

。您将在代码中清楚地看到这一点

如果你选择，你可以做一个单一的函数，但为了简单起见，我把它分成了不同的函数，所以它更容易阅读。如果你对某事有疑问，但你不确定，请询问。这应该给你一个很好的出发点，让你知道你想去哪里

这里还有一把小提琴你可以参考：

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>

乘法表游戏

输入一个小于20的数字

倍增！

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

var MAX=20；
var button=document.getElementById（'startName'）；
按钮。addEventListener（'click'，函数（e）{
var oldTable=document.getElementById（'multipleTable'）；
如果（旧表）{
oldTable.parentNode.removeChild（oldTable）；
}
var input=document.getElementById（'inputNumber'）。值；
如果（输入<最大值）{
var table=document.createElement（'table'）；
table.setAttribute（'id'，'multipleTable'）；
table.appendChild（createTableHeader（输入））；
对于（var i=0；i
不要使用
文档。写入
。它会删除所有内容

使用特定于
TableObject
的方法
单独的HTML代码和样式规则

//定义可重用元素
const userInput=document.getElementById（“userInput”）；
const container=document.getElementById（'container'）；
函数表_函数（）{
//从输入中获取数值
var valUserInput=parseInt（userInput.value）；
//控制台日志（valUserInput+1）；
//空容器
container.innerHTML=''；
var tbl=document.createElement（'table'）；
容器.附件（tbl）；
//TableObject有自己的DOM模型和方法
var row=tbl.insertRow（-1）；//添加到末尾
row.insertCell（-1）.innerHTML='X'；
//填写第一行
对于（var i=1；i）您的尝试到目前为止发生了什么？您是否必须使用纯javascript，或者是否可以使用库、HTML模板等？