如何将值从 javascript 传递到 html？
[英]How to pass values from javascript to html?
问题描述
I am trying to generate multiplication tables in JavaScript and pass the values to the rows of a table in html.
我正在尝试在 JavaScript 中生成乘法表并将值传递给 html 中的表的行。 I want an output like the image shown.我想要一个像显示的图像一样的输出。 Can anyone help me with this.谁能帮我这个。 I'm new to Javascript and am trying to figure out some of the basics.我是 Javascript 的新手，正在尝试了解一些基础知识。 Thanks.谢谢。
<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>
4 个解决方案
解决方案1
1 2014-04-15 15:41:59
Okay so I set up a small example here that should give you a nice example of how to do this:好的，所以我在这里设置了一个小例子，它应该给你一个很好的例子来说明如何做到这一点：
http://jsfiddle.net/MHfyE/ http://jsfiddle.net/MHfyE/
HTML: HTML：
<div id="content">
</div>
<button id="button">Do It!</button>
Javascript: 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);
}
I feel like this is enough to get you started.我觉得这足以让你开始。
解决方案2
1 已采纳 2014-04-15 15:42:45
I don't understand why you are using html form and js prompt at the same time.我不明白你为什么同时使用 html 表单和 js 提示。
Ok, you can use this :好的，你可以使用这个：
<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>
解决方案3
0 2014-04-15 15:40:48
First, you're overwriting myVar right after asking it in the prompt, doesn't make much sense.首先，您在提示中询问后立即覆盖 myVar，没有多大意义。
var myVar = prompt("Give me my var!");
console.log(myVar);
Then you'll somehow have to generate the HTML, you can do it by using jQuery and appending elements or vanilla JS or just generating the raw HTML string.然后您将不得不以某种方式生成 HTML，您可以通过使用 jQuery 和附加元素或 vanilla JS 或仅生成原始 HTML 字符串来完成。 Or using something like AngularJS's ng-repeat.或者使用类似 AngularJS 的 ng-repeat 的东西。
Here's a really simple example:这是一个非常简单的例子：
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);
}
Fiddle: http://jsfiddle.net/jbNbs/1/小提琴： http : //jsfiddle.net/jbNbs/1/
解决方案4
0 2014-04-15 16:13:44
Here is a simple example .... This way, the table is NOT generated by the JavaScript.这是一个简单的例子.... 这样，表格就不是由 JavaScript 生成的。 JavaScript fills the cell data. JavaScript 填充单元格数据。 Enter a number in the box, hit enter If the entry is not a number, it will reject it (won't do anything)在框中输入一个数字，按回车 如果输入的不是数字，它会拒绝它（不会做任何事情）
The 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;
}
}
The HTML 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;"> </td><td style="width: 50px;"> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td></tr>
</table>
Good luck :)祝你好运 ：）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.