Question

我正在尝试制作能够更容易编写矩阵/矩阵的东西。首先获取矩阵尺寸的两个数字输入。之后你会“提交”这些数字并输出几个输入框。

你怎么写这段代码？是否可以在另一个函数中执行此操作？

我在考虑让“提交”按钮有一个验证，看看数字是否真实，如果它们是函数继续for循环，如何“写出”数字框。

这就是我现在所得到的：

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>

Answer 1

到目前为止，这是我对你提出的问题所做的。如果它正在进行中，那么我们可以在此基础上进行构建。

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>

在函数或任何其他方法中创建输入（Javascript）

1 个答案: