在函数或其他方法中创建输入(Javascript) - Creating inputs in function, or any other method (Javascript)

Creating inputs in function, or any other method (Javascript)

我想做一些事情，使它更容易写出一个矩阵/矩阵。你从矩阵维数的两个数字输入开始。然后你"提交"数字，然后出现几个输入框。

这段代码是怎么写的?有可能在另一个函数中这样做吗?

我想让"提交"按钮有一个验证，看看数字是否是真实的，如果它们是，函数继续循环如何"写"出数字框。

这是我现在得到的:

function validate(){
    var num;
    num = document.getElementById("numberbox").value;
    var myForm = document.getElementById('payForm'); // 
    while(myForm.hasChildNodes()){
        myForm.removeChild(myForm.firstChild);
    }
    myForm = document.createElement("form");
    myForm.setAttribute("method","post");
    myForm.setAttribute("action","processChecking.php");
    if(isNaN(num) || num<1){
        document.getElementById("output").innerHTML = "invalid number!";
        document.getElementById("numberbox").value = '';
    } else {
        document.getElementById("output").innerHTML = "number validated!";
        array(num);
        for (var i = 0; i <= num; i++) {
            var input = document.createElement('input');
            input.type = 'text';
            input.name = 'myInput_' + i;
            input.id = 'myInput_' + i;
            myForm.appendChild(input);
        }
    }          
}

<body>
    <table>
        <tr>
            <td>
                <p>
                    Enter number for how many number boxes you want:<br>        
                    <input id="numberbox" type="number">        
                    <button type="button" onclick="validate()">Validate</button>
                    <br>
                    <p id="output"></p>
                    <br>
                </p>
            </td>
            <td style="text-align:right;">
                <p id="payForm"></p>   
            </td>
        </tr> 
    </table>
</body>

从你的问题到目前为止，我得出了以下结论。如果它在轨道上，那么我们可以在它的基础上继续发展。

function createTable() {
  var num_rows = document.getElementById('rows').value;
  var num_cols = document.getElementById('cols').value;
  var theader = '<table border="1">'n';
  var tbody = '';
  for (var i = 0; i < num_rows; i++) {
    tbody += '<tr>';
    for (var j = 0; j < num_cols; j++) {
      tbody += '<td>';
      tbody += '<input type="number">'
      tbody += '</td>'
    }
    tbody += '</tr>'n';
  }
  var tfooter = '</table>';
  document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}

<form name="tablegen">
  <label>Input number of rows :
    <input type="number" name="rows" id="rows" />
  </label>
  <br />
  <label>Input number of columns :
    <input type="number" name="cols" id="cols" />
  </label>
  <br/>
  <input name="generate" type="button" value="Create Table!" onclick='createTable();' />
</form>
<div id="wrapper"></div>