如何创建最初有 N 个 div 的 HTML 页面
我正在制作一个类似于具有多个步骤的表单的页面。
但在此之前，我从之前的表单中取出一个数字 N，它代表表单的步骤数。
每个步骤都需要一个“tab”类的特定 div。现在，我需要使用 Javascript 或 PHP 来将主 div 复制 N 次。
<form id="regForm" action="/action_page.php">
<!-- One "tab" for each step in the form: -->
<div class="tab">
<h1>Register:</h1>
Name:
<p><input placeholder="First name..." oninput="this.className = ''" name="fname"></p>
<p><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p>
</div>
</form>
繁花不似锦浏览 132回答 2
2回答
-
RISEBY
此代码克隆 div N 次<html><body> <div class="tab" id="id0"> <p>Test Tab</p> </div> <script> // Get the element var elem = document.querySelector('#id0'); //set n to the value form the previous page var n = 10; var i; for (i = 1; i < n; i++) { // Create a copy of it var clone = elem.cloneNode(true); // Update the ID clone.id = "id" + n; // Inject it into the DOM elem.after(clone); } </script></body></html> -
12345678_0001
您可以占用一个 for 并重复您使用 POST 或 GET 带来的步骤数的 div<!-- One "tab" for each step in the form: --><?php $divs = $_POST('number_divs'); for ($i = 1; $i <= $divs; $i++) { ?><div class="tab"> <h1>Register:</h1> Name: <p><input placeholder="First name..." oninput="this.className = ''" name="fname"></p> <p><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p></div> <?php } ?>
随时随地看视频慕课网APP
PHP