如何将值从 javascript 传递到 html？

Question

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

我想使用 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 填充单元格数据。 在框中输入一个数字，按回车如果输入的不是数字，它会拒绝它（不会做任何事情）

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 个解决方案

解决方案1
1 2014-04-15 15:41:59

解决方案2
1 已采纳 2014-04-15 15:42:45

解决方案3
0 2014-04-15 15:40:48

解决方案4
0 2014-04-15 16:13:44

如何将值从 javascript 传递到 html？

问题描述

4 个解决方案

解决方案1 1 2014-04-15 15:41:59

解决方案2 1 已采纳 2014-04-15 15:42:45

解决方案3 0 2014-04-15 15:40:48

解决方案4 0 2014-04-15 16:13:44

解决方案1
1 2014-04-15 15:41:59

解决方案2
1 已采纳 2014-04-15 15:42:45

解决方案3
0 2014-04-15 15:40:48

解决方案4
0 2014-04-15 16:13:44