Question

我正在尝试为输入框中输入的任何数字创建Javascript乘法时间表。因此，当我单击“生成”按钮时，它将生成1到12之间的数字乘法，然后以HTML格式打印出其结果。然后输出结果将打印在HTML表格中。到目前为止，我已经创建了以下代码。

<!DOCTYPE HTML PUBLIC>

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>5 Multiplication Table</title>
<!--<script type="text/javascript" src="timetable.js"></script> -->
</head>
<body>
   <script>
      function timesTable(){
      for (var i = 0; i <= 12; i++){
          var number1 ={}; //Empty placeholder for input
          var number1 = +document.getElementById("number1").value;
          var input = number1 * i;
          var generate = +document.getElementById("answers").value = input;   
          }
        }
   </script>
   <table>
     <tr>
        <td>Time Table for:</td>
        <td>
           <input type="text" id = "num1" /></td>
        <td rowspan="2">
           <input type="button" value="Generate" onclick="timesTable()"/>
        </td>
        <td style="text-align:right" id="answers">Time Table:</td>
    </tr>
  </table>
</body>
</html>

Answer 1

首先，您将不得不将用户的输入解析为值 - parseFloat或parseInt将适用于此值，具体取决于您是否需要浮点值或整数值。

其次，您可能希望每个乘数和乘积都有一个新的表格行：例如，

<tr><td>0</td><td>0</td></tr>
<tr><td>1</td><td>42</td></tr>
<tr><td>2></td><td>84</td></tr>

等。这里的棘手问题是能够将这些添加到用户输入的表格末尾，然后在下次按下按钮时再次删除它们。虽然我喜欢自己保持基本，但我肯定会鼓励你使用JQuery来对表进行html更新 - 否则，找到你添加的每一行都很痛苦。你可以使用像

这样的东西

$(".timestable").remove()

删除所有/之前的timestable行（http://api.jquery.com/remove/），然后删除代码，例如

$('#mytable').append("<tr class='timestable'>...</tr>")

写出新（或第一）次表（http://api.jquery.com/append/）

的每一行

Javascript乘法时间表

1 个答案: