Question

我的程序应首先向用户询问数组大小。我想创建一个程序，应该创建表，直到给定的大小。

<html>

  <head>
    <title>table creating with array size</title>
  </head>

  <body>
    <input id="get"> <button onclick="count()">click here</button>
  </body>

</html>

function count() {
    var num = document.getElementByid('get').value;
    var num = new Array();
    array.length;
    for (var i = 0, i < 10, i++) {
        for (var j = 0, j < 10, j++) {
            num.innerHTML = ("<p>", num, "x", i, "=", num * i, "</p>")
        }
    }
}

Answer 1

您应该使用+连接所有字符串，然后将它们分配给DOM元素的innerHTML。

您的循环应使用num作为限制。 for循环标题的部分由;分隔，而不是,。

您应该打印并乘以迭代变量，而不是num。

function count() {
  var num = parseInt(document.getElementById('get').value);
  var table = [];
  for (var i = 0; i < num; i++) {
    for (var j = 0; j < num; j++) {
      table.push("<p>" + i + " x " + j + " = " + (i * j) + "</p>");
    }
  }
  document.getElementById("output").innerHTML = table.join("");
}

<input id="get"> <button onclick="count()">Click here</button>
<div id="output">
</div>

Answer 2

您的代码存在一些重大问题。

您使用的“getElementByid”应该是getElementById - '我'是'Id'中的首都

您的for循环以“,”分隔，该;'应为“,”

您的联系是“+”，应该是function count() { var element = document.getElementById('get'); var output = document.getElementById('output'); var num = element.value; var outputHtml = ""; for (var i = 0; i < num; i++) { for (var x = 0; x < num; x++) { outputHtml += ("<p>" + i + " x " + x + " = " + x * i + "</p>") } } output.innerHTML = outputHtml; }

看来你正在尝试做“乘法表”而不是任何随机表（表可能是html表，数据表等。当你提出问题时，你需要更明确。这是你自己的益处。

以下是例子：

<html>

  <head>
    <title>table creating with array size</title>
  </head>

  <body>
    <input id="get"> <button onclick="count()">click here</button>
    <div id="output">
    </div>
  </body>

</html>

Private Sub Workbook_Open()
    Sheets("Guide").Select
    ActiveSheet.Range("A9").Select
End Sub

Private Sub Workbook_Open()
Application.OnKey "%{F11}", "DisableAltF11"
Application.OnKey "%{F8}", "DisableAltF8"
End Sub

Answer 3

根据要求，我从w3schools.com - Bootstrap3 Tables (Hover)页面复制了基于Bootstrap3的HTML代码并编写了javascript，以便它可以满足您的要求。

我已经编写了javascript代码，认为我将根据用户输入创建一个用户动态表。代码

要求输入整数 n （我们要创建的用户数）。
询问 n 用户的姓名。
要求重新输入输入 n （如果您没有输入正确的整数）或用户名称（如果您将用户的名称留空）。< / p>

请查看以下gif图片（也可以使用完整的工作代码进行复制和修改）。

最后，您可以复制并尝试在浏览器中执行以下HTML代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>All Users - Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
  td {
    font-family: tahoma;
    color: blue;
  }
  h1 {
    color: green;
  }
  p {
    color: blue;
    font-family: tahoma;
  }
</style>
<body>

<!-- HTML CODE COPIED FROM: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_hover&stacked=h -->
<center>
    <h1>All Users</h1> 
</center>

<div class="container text-center" id='table'>
  <div class="col-xs-12 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
    <p>Currently, no user(s) found, you need to create it</p>
    <br>
    <button class='btn btn-success' onclick="createUsersTable()">Create now</button>   
  </div>    
</div>


<script type="text/javascript">
  // Coded: 20 May 2018, Sun
  // Note: You can uncomment the lines if you want table header
  function createUsersTable() {
    var n = prompt('Enter number of users that you want to create.');
    var tableHtmlStart = '<table class="table table-hover">' +
      // '<thead>' +
      //   '<tr>' +
      //     '<th style="text-align:center">User(s)</th>' +
      //   '</tr>' +
      // '</thead>' +
      '<tbody>'

    var users = ""
    var tableHtmlEnd = "</tbody></table>"

    console.log(n)

    if(n === null) {
      // If user cancels
      alert("You cancelled")
      document.getElementById("table").innerHTML = "You cancelled"
    } else {
        if(n === '') {
          alert("Don't leave blank, please enter an integer")
          createUsersTable()
        } else {
          n = parseInt(n);
          if(!Number.isInteger(n)){
            alert("Input should be an integer, please enter an integer")
            createUsersTable()
          } else { // If n is an integer
            if(n < 0) {
              alert("Please enter a +ve integer, you entered: "+ n)
              createUsersTable()
            } else { // If the user inputs a proper integer > 0
              for(var i = 0; i < n; ){ // Taking user names using prompt()
                var user = prompt("Enter the name of USER " + (i + 1) + ":")
                if(user == null) {
                  alert("You cancelled, please enter correct name of USER" + (i + 1))
                } else {
                  if(user == ''){
                    alert("Username can't be blank, please enter correct name of USER" + (i + 1))
                  } else {
                    console.log("User " + (i + 1) + " successfully added")
                    users += '<tr><td>' + user + '</td></tr>'
                    i = i + 1;
                  }
                }
              }

              // Setting innerHTML of div with id 'table'
              document.getElementById("table").innerHTML = tableHtmlStart + users + tableHtmlEnd;
            }
          }
        }
      }
    }
</script>
</body>
</html>

感谢。

我想在javascript中使用数组创建一个表

3 个答案: