如何为循环制作一个简单的 5 行 JavaScript 乘法表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28777440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a simple 5 line JavaScript Multiplication table for loop
提问by tyler
I am currently struggling on this project, as I have no idea what goes where and through the various searches online, I get different answers so the code I have currently have most likely is no where near correct. The multiplication table goes 1 - 10 and shows multiplication answers up to 5. (1x1 = 1, 1x2 = 2, all the way up to 5x10, if that makes sense) I need a correct example of my code.
我目前在这个项目上苦苦挣扎，因为我不知道什么去哪里以及通过各种在线搜索，我得到了不同的答案，所以我目前拥有的代码很可能不是正确的。乘法表是 1 - 10 并显示最多 5 的乘法答案。（1x1 = 1，1x2 = 2，一直到 5x10，如果有意义的话）我需要一个正确的代码示例。
<!DOCTYPE html>
<html>
<head>
<title>Multiplication Tables</title>
</head>
<body>
<p>Enter a number below to see its multiplication table.</p>
<input type="text" name="txtNumber" id="txtNumber" placeholder="Enter a number" />
<br />
<br />
<button onclick="DisplayTable();">Click Me</button>
<div id="multiTable"></div>
<script language="javascript">
function DisplayTable(){
for (var i = 1; i <= 10; i++){
for (var i = 1, var j = 0; (i+j) <= 10; i++, j += i) {
System.out.print("\t"+i*j);
System.out.println();
}
}
}
</script>
</body>
</html>回答by Philip
1) When inserting/including Javascript, please use type="text/javascript"instead of language="javascript", because the latter is not standard code.
1) 插入/包含Javascript时，请使用type="text/javascript"代替language="javascript"，因为后者不是标准代码。
2) As already mentioned in the comments, you're trying to redefine the counter of your first for-loop (var i = 1) in your second for-loop (var i = 1, var j = 0). It's better to use the icounter for the outer for-loop and only jfor the inner/second for-loop. (Since the icounter is already available in both loops, and you don't want to reset it there.)
2) 正如评论中已经提到的，您试图var i = 1在第二个 for循环 ( ) 中重新定义第一个 for 循环 ( )的计数器var i = 1, var j = 0。最好将i计数器用于外部for循环并且仅j用于内部/第二个for循环。（因为i计数器已经在两个循环中可用，您不想在那里重置它。）
3) System.out.printand System.out.printLnare not JavaScript functions. Javascript's equivalent is document.write("Some text");. But this function is NOT recommended, since it will clear all HTML when you call it after the page is loaded (which is the case here).
So, instead, in your Javascript function, use a string variable where you store your generated HTML-code. Then let your Javascript function add a new table row/cell on every iteration in your for-loop.
3)System.out.print并且System.out.printLn不是 JavaScript 函数。Javascript 的等效项是document.write("Some text");. 但是不推荐使用这个函数，因为它会在页面加载后调用它时清除所有 HTML（这里就是这种情况）。因此，相反，在您的 Javascript 函数中，使用一个字符串变量来存储生成的 HTML 代码。然后让您的 Javascript 函数在您的for-loop 中的每次迭代中添加一个新的表格行/单元格。
4) When creating a table in HTML, don't use \t, instead use the appropriate <table>tag, with table rows (<tr>) and table cells (<td>).
4) 在 HTML 中创建表格时，不要使用\t，而是使用适当的<table>标签，带有表格行 ( <tr>) 和表格单元格 ( <td>)。
5) It's unclear what you want to do with just the one input-field. I guessed you want to use input's to let the user choose where to start and end with the multiplications (rows and columns). In that case, you need 4 input-fields (with unique ID's). These 4 values are fetched at the start of your Javascript function to use them as start and end points for your for-loops.
5）目前还不清楚你想用一个input字段做什么。我猜您想使用input's 来让用户选择乘法（行和列）的开始和结束位置。在这种情况下，您需要 4 个input字段（具有唯一 ID）。这 4 个值是在您的 Javascript 函数开始时获取的，以将它们用作您的for-loops 的起点和终点。
Example:
例子：
function DisplayTable(){
/* first, get the values of the input fields and parse them as integers */
var colStart = parseInt(document.getElementById("startCol").value);
var colEnd = parseInt(document.getElementById("endCol").value);
var rowStart = parseInt(document.getElementById("startRow").value);
var rowEnd = parseInt(document.getElementById("endRow").value);
/* create a buffer variable for the new html code & put a opening table tag in it (with a border for clearity) */
var htmlBuffer = "<table border='1'>";
for (var i = rowStart; i <= rowEnd; i++){
/* add a opening table row tag to the buffer */
htmlBuffer += "<tr>";
for (var j = colStart; j <= colEnd; j++) {
/* add a table cell with the multiplication inside it to the buffer */
htmlBuffer += "<td>"+ (i*j) + "</td>";
}
/* add a closing table row tag to the buffer */
htmlBuffer += "</tr>";
}
/* add a closing table tag to the buffer */
htmlBuffer += "</table>";
/* print/put generated html code inside the DIV element */
document.getElementById("multiTable").innerHTML = htmlBuffer;
}<p>Fill in the numbers below and click "Generate table" to see their multiplication table.</p>
Start columns with:<br />
<input type="text" name="startCol" id="startCol" placeholder="Enter a number" value="1" /><br />
End columns with:<br />
<input type="text" name="endCol" id="endCol" placeholder="Enter a number" value="20" /><br />
<br />
Start rows with:<br />
<input type="text" name="startRow" id="startRow" placeholder="Enter a number" value="1" /><br />
End rows with:<br />
<input type="text" name="endRow" id="endRow" placeholder="Enter a number" value="10" /><br />
<br />
<br />
<button onclick="DisplayTable();">Generate table</button>
<br />
<div id="multiTable"></div>