动态创建的 HTML 表打开新页面答案

【问题标题】：Dynamically created HTML table opens new page动态创建的 HTML 表打开新页面
【发布时间】：2014-11-26 10:56:23
【问题描述】：

我有一个代码，一个数学表编码器。同一页..

    <!doctype html>
<html>
<head>
    <title>Tafel Trainer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section id="content">
    <p>Wilt u de tafels leren? Klik op de knop oefenen</p>
    <button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()';>Tafel oefenen!</button>
<div id="1">
    <script type='text/javascript'>
    function oefenen(){
            var num = prompt("Zet een cijfer neer", "0");
            var num1 = parseInt(num); 



                for(i= 1; i< 11; i++) {
                    document.writeln("<table border='1'><tr><td>" + i + " x " + num1 + " = " + i * num1 + "<br/></td></tr></table>");
                                    }

                    }   

</script>

</div>
    </section>
</body>
</html>

我已经尝试过使用 document.getElementByID('div1').innerHTML = i;但是那个代码也没有工作，我确定这是初学者的错，但是什么:)？

提前致谢！

【问题讨论】：

您可能希望使用比document.write 更传统的方法。试试appendChild 或innerHTML
让我试试，谢谢你的快速回复:)
没用，我就是想要在按钮下

标签： javascript html css loops for-loop

【解决方案1】：

如果您的表格有div 占位符，您将可以更好地控制自己的操作，例如

function oefenen(){
	var num = prompt("Zet een cijfer neer", "0");
	var num1 = parseInt(num); 
	var table = document.getElementById("tablebody");

	for(var i= 1; i< 11; i++) {
		var td = document.createElement("td"); //create TD
		td.innerHTML = i + " x " + num1 + " = " + (i * num1);
		var tr = document.createElement("tr");
		tr.appendChild(td); //add TD to the TR
		table.appendChild(tr); //add TR to the table
	}
                //show the placeholder
	document.getElementById("placeholder").style.display = ""; 
}

<section id="content">
<p>Wilt u de tafels leren? Klik op de knop oefenen</p>
<button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()';>Tafel oefenen!   </button>
<div id="1"> <!-- I'm not sure what you use this div for -->
</div>
<div id="placeholder" style="display:none;"> <!-- Placeholder area -->
	<table border="1" id="tablebody"></table>
<div>
</section>

还要注意我是如何在循环中 var 和 i 的 - 否则您将在窗口级别创建对 i 的引用，而不仅仅是针对函数的范围。

此外，createElement 的使用可能看起来很冗长 - 但是当您创建任何复杂的标记时，它更倾向于设置 innerHTML 和连接字符串等。跟踪发生的事情当然更容易on 并将部分分解为其他功能。

【讨论】：

【解决方案2】：

在这里工作正常。 ## 在上面关于想要它在按钮下的 cmets 之后编辑

function oefenen() {
  var num = prompt("Zet een cijfer neer", "0");
  var num1 = parseInt(num);

  for (i = 1; i < 11; i++) {
    document.getElementById('results').innerHTML+=("<tr><td>" + i + " x " + num1 + " = " + i * num1 + "<br/></td></tr>");
  }

}

<section id="content">
  
  <p>Wilt u de tafels leren? Klik op de knop oefenen</p>
  
  <button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()' ;>Tafel oefenen!</button>
  
  <table border="1" id=
"results">
    </table>
  
</section>

【讨论】：

它有效，但我希望它在同一页面中。或者这是在同一页面中？我猜我停电了。可能就在按钮下面..
离开了一段时间，这是我第一次看到代码 sn-p！太棒了！
为什么要创建 11 个表格，每个表格有 1 个单元格？

【解决方案3】：

根据您的要求编写代码以打印所需数字的乘法表 ....

     <!doctype html>
<html>
<head>
    <title>Tafel Trainer</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
   <section id="content">

  <p>Wilt u de tafels leren? Klik op de knop oefenen</p>

  <button id="oefenen" name="oefenen" value="oefenen" onclick='oefenen()' ;>Tafel oefenen!</button>
  <br />  <br />
  <div id="math">

  </div>

</section>
<script>
function oefenen() {
  var num = prompt("Zet een cijfer neer", "0");
  var num1 = parseInt(num);

  for (i = 1; i < 11; i++) {
    document.getElementById('math').innerHTML+=(num1 + " x " + i + " = " + i * num1 + "<br/>");}

}
</script>
</body>
</html>

【讨论】：

为什么要在 div 中添加 tr 和 td。
其实我只是自定义了他的代码，忘记删除那些标签。我编辑了代码以打印正确的乘法表..Thanq..@Billy

【解决方案4】：

“如果您在加载的 HTML 文档上执行 document.write() 方法，所有 HTML 元素都将被覆盖” 说 w3schools

I think it is better to use innerHTML

【讨论】：

您正在向页面写入 11 个表格，而不是 1 个。