Question

的Javascript

function addFields(rooms){
    var number = rooms;
    var container = document.getElementById("container");
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }
    for (i=1;i<number;i++){
        var input1 = document.createElement("input");
        var input2 = document.createElement("input");
        input1.type = "text";
        input2.type = "text";
        container.appendChild(document.createTextNode("name room" + (i+1)));
        container.appendChild(input1);
        container.appendChild(document.createTextNode("size room" + (i+1)));
        container.appendChild(input2);

    }
}

CSS

.column {
    float: left;
    width: 20%;
}

.heading1 {
    font-size: 1.2em;
}

HTML

<form method="post" action="#">

    <div class="column">
        <h2 class="heading1">object</h2>
    </div>
    <div class="column">
        <h2 class="heading1">costs</h2>
    </div>
    <div class="column">
        <h2 class="heading1">funding</h2>
    </div>
    <div class="column">
        <h2 class="heading1">rooms</h2>
    </div>
    <div class="column">
        <h2 class="heading1">reconstruction</h2>
    </div>

    <div class="column">
        <label>street:</label>                  
    </div>

    <div class="column">
        <label>costs:</label>                   
    </div>

    <div class="column">
        <label>term>:</label>                   
    </div>

    <div class="column">
        <label>name room 1:</label>                 
    </div>
    <div class="column">
        <label>floor:</label>                   
    </div>

    <div class="column">
        <input name="street" type="text" class="textbox" value="">  
    </div>  

    <div class="column">
        <input name="costs" type="text" class="textbox" value="">   
    </div>      

    <div class="column">
        <input name="term" type="text" class="textbox" value="">    
    </div>          

    <div class="column">
        <input name="nameRoom1" type="text" class="textbox" value="">   
    </div>  

    <div class="column">
        <input name="floor" type="text" class="textbox" value="">   
    </div>      

    <div class="clear"> </div>

    <div class="column">
        <label>date of purchase:</label>
    </div>

    <div class="column">
        <label>power:</label>
    </div>

    <div class="column">
        <label>interest:</label>
    </div>

    <div class="column">
        <label>size room 1</label>
    </div>

    <div class="column">
        <label>walls:</label>
    </div>


    <div class="column">
        <input name="dateOfPurchase" type="text" class="textbox" value="">   
    </div>


   <div class="column">
        <input name="power" type="text" class="textbox" value="">    
    </div>

     <div class="column">
        <input name="interest" type="text" class="textbox" value="">     
    </div>

    <div class="column">
        <input name="sizeRoom" type="text" class="textbox" value="">     
    </div>

    <div class="column">
        <input name="walls" type="text" class="textbox" value="">    
    </div>

                <div class="clear"> </div>

    <div class="column">
        <label>number of rooms</label>
    </div>

    <div class="column">
        <label>water:</label>
    </div>

    <div class="column">
        <label>residual value:</label>
    </div>

    <div class="column">
        <label>parkingspot:</label>
    </div>

    <div class="column">
        <label>bath:</label>
    </div>


     <div class="column">
         <select name="roomsss" class="textbox" onchange="addFields(this.value)">
                                      <option>1</option>
                                      <option>2</option>
                                      <option>3</option>
                                      <option>4</option>
                                      <option>5</option>
        </select>
    </div>

    <div class="column">
        <input name="water" type="text" class="textbox" value="">   
    </div>      

    <div class="column">
        <input name="residualvalue" type="text" class="textbox" value="">   
    </div>          

    <div class="column">
        <input name="parkingspot" type="text" class="textbox" value=""> 
    </div>  

    <div class="column">
        <input name="bath" type="text" class="textbox" value="">    
    </div>  

    <div id="container"/>

我有一个表单，您可以在其中选择房间数量，每个房间都会有一个输入字段，用于房间的大小和名称。

我遇到的问题是脚本生成新字段的位置。我有一个额外的列，第四个，命名的房间，所有的房间信息都应该在那里进行。所以2号房间的名称/大小应该在1号房间和＃34;停车位之间＃34;等等。但是，这对我来说非常重要：如果有一个房间，那么＃34;房间选择的数量和＃34;和＃34;停车位＆＃34;在同一行。如果有超过1个房间，这不应该是这种情况。第四列应该将所有新元素加起来（独立于其他元素位置）增长（向下）。

如果有人可以帮助我，我会很高兴。如果你有一个更简单的想法来构建整个事情，这显然也没关系，这个div-thing是我的第一枪。

动态添加内容以形成特定位置

0 个答案: