Question

我正在尝试在JavaScript中生成乘法表，并将值传递给html中表的行。我想要一个像所示图像的输出。谁能帮我这个。我是Javascript的新手，我正试图找出一些基础知识。谢谢。

Table I want to produce using JavaScript

<html>
<head>
<title>Multiplication Table Generator</title>

<script language="javascript" type="text/javascript">


function generateTable()
{
 var myVar = prompt("A number?", "");
 var myVar = multTables.number.value;
 var myString = "";
 for (i=1; i<=myVar; i++) {
   myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
 }
}

</script>

</head>
<body>
<h1>Times Tables</h1>
<form name="multTables">

Enter a number<input type=text name="number">
<input type=button name="button1" value="Show Table" onclick="generateTable()">

<table border=1>
<tr><th>times tables</th></tr>
<tr><td>
<!-- 1X7, 2X7...etc-->
</td>
<td>
<!-- 7, 14, 21...etc-->
</td>
</tr>
</table>
</form>
</body>
</html>

Answer 1

好的，所以我在这里设置了一个小例子，它可以为你提供一个如何做到这一点的好例子：

http://jsfiddle.net/MHfyE/

HTML：

<div id="content">

</div>        
<button id="button">Do It!</button>

使用Javascript：

var buttonElt = document.getElementById("button");
buttonElt.onclick = function() {
    var elt = document.createElement("div");
    for (var i = 0; i < 10; i++) {
        var childElt = document.createElement("p");
        childElt.innerHTML = i;
        elt.appendChild(childElt);    
    }
    var parentElt = document.getElementById("content");
    parentElt.appendChild(elt);
}

我觉得这足以让你开始。

Answer 2

我不明白你为什么同时使用html表单和js提示。

好的，你可以用这个：

       <html>
    <head>
    <title>Multiplication Table Generator</title>

    <script language="javascript" type="text/javascript">


    function generateTable()
    {
     //var myVar = prompt("A number?", "");
     var myVar = document.forms.multTables.x.value;
     var myString = "<tr><th>"+ myVar + " times tables</th></tr>";
     for (i=1; i<=myVar; i++) 
     {
        myString += "<tr><td>";
       myString += i+ " x " +myVar+ " = " +(i*myVar)+ "\n";
       myString += "</td></tr>";
     }
     document.getElementById('t').innerHTML = myString;
     return false;
    }

    </script>

    </head>
    <body>
    <h1>Times Tables</h1>
    <form name="multTables">

    Enter a number<input type="text" name="number" id="x">
    <input type="button" name="button1"  value="Show Table" onclick="generateTable()">

    <table border="1" id="t">

    </table>
    </form>
    </body>
    </html>

Answer 3

首先，你在提示中询问后立即覆盖myVar，没有多大意义。

var myVar = prompt("Give me my var!");
console.log(myVar);

然后，您将以某种方式生成HTML，您可以通过使用jQuery并附加元素或vanilla JS或仅生成原始HTML字符串来实现。或者使用类似AngularJS的ng-repeat。

这是一个非常简单的例子：

var table = document.createElement("table");
for (var i = 0; i < 10; i += 1) {
  var tableRow = document.createElement("tr");
  for (var j = 0; j < 10; j += 1) {
     var tableCell = document.createElement("td");
     tableCell.innerHTML = i * j;
     tableRow.appendChild(tableCell);
  }
  table.appendChild(tableRow);
}

小提琴： http://jsfiddle.net/jbNbs/1/

Answer 4

这是一个简单的例子.... 这样，表不是由JavaScript生成的。 JavaScript填充单元格数据。在框中输入一个数字，然后按Enter键如果条目不是数字，它将拒绝它（不会做任何事情）

JavaScript

function generateTable(n) {

  n = parseInt(n); // convert to integer
  if (!n) { return; } // end execution if not found

  // get all the tr in the table
  var tr = document.querySelectorAll('#timesTable tr');
  tr[0].children[0].textContent = n + ' Times Table';

  for (var i = 1; i <= 9; i++) {

    tr[i].children[0].textContent = i + ' x ' + n + ' =';
    tr[i].children[1].textContent = i * n;
  }

}

HTML

Enter a number: <input type="text" id="box" onchange="generateTable(this.value);">
<br /><br />

<h1>Times Tables</h1>

<table id="timesTable" border="1">
<tr><th colspan="2">Times Table</th></tr>
<tr><td style="width: 100px;">&nbsp;</td><td style="width: 50px;">&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

祝你好运：）

如何将值从javascript传递给html？

4 个答案: