为了账号安全,请及时绑定邮箱和手机立即绑定

最初如何创建具有 N 个 div 的 HTML 页面

最初如何创建具有 N 个 div 的 HTML 页面

哔哔one 2022-10-13 15:49:36
我正在做一个页面,就像一个带有多个步骤的表单。但是在此之前我从以前的表格中取一个数字 N,它代表表格的步数。每个步骤都需要一个特定的 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>
查看完整描述

2 回答

?
慕的地8271018

TA贡献1796条经验 获得超4个赞

此代码克隆 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>


查看完整回答
反对 回复 2022-10-13
?
MMTTMM

TA贡献1869条经验 获得超4个赞

您可以使用 POST 或 GET 占用一个 for 并重复 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 }  ?>


查看完整回答
反对 回复 2022-10-13
  • 2 回答
  • 0 关注
  • 175 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号