動態創建輸入的問題

我使用JavaScript創建動態輸入。但我無法處理輸入寬度問題。輸入的創建取決於用戶的選擇。（像4行和6列）我有一個div頁面中心。
我想要：無論創建多少列，寬度必須固定在該div中。我的意思是如果有4列和width:50px爲每個，那麼它必須是40px 5列創建時。動態創建輸入的問題

Here is the same problem，但它不適合我。

這是我的代碼：

function HideHider() { 
 
    var hider = document.getElementById("hiderPanel"); 
 
    var satir = document.getElementById("satir").value; 
 
    var sutun = document.getElementById("sutun").value; 
 
    var area = document.getElementById("inputArea"); 
 
    var w = 100/sutun; 
 

 
    for (i = 0; i < satir; i++) { 
 
     var newdiv = document.createElement("div"); 
 
     newdiv.setAttribute("class", "satirdiv"); 
 
     newdiv.setAttribute("id", "satir" + i + 1); 
 
     area.appendChild(newdiv); 
 
    } 
 

 
    for (i = 0; i < satir; i++) { 
 
     for (j = 0; j < sutun; j++) { 
 
      var newinput = document.createElement("input"); 
 
      var gecici = document.getElementById("satir" + i + 1); 
 
      newinput.type = "text"; 
 
      newinput.setAttribute("id", "input" + (satir + 1) + "_" + (sutun + 1)); 
 
      gecici.appendChild(newinput); 
 
     } 
 
    } 
 

 
    hider.style.display = 'none'; 
 
}

.hider 
 
{ 
 
    display:block; 
 
    position:fixed; 
 
    top:0; 
 
    left:0;  
 
    height:100%; 
 
    width:100%; 
 
    z-index:15;  
 
    background: rgba(64, 64, 64, 0.5); 
 
    opacity:0.9; 
 
} 
 

 
.inputpanel 
 
{ 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); 
 
    background-color: #F7F7F7;  
 
    padding:40px; 
 
    width:300px; 
 
    height:350px; 
 
} 
 

 
.btndiv 
 
{ 
 
    margin-top:30%; height:40px; 
 
} 
 

 
.btndiv button 
 
{ 
 
    text-align:center; 
 
    color:white; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:#008CBA; 
 
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
 
    border-radius: 8px; 
 
} 
 

 
.satirdiv 
 
{ 
 
    display:table; 
 
    width:100%;  
 
} 
 

 
.satirdiv input 
 
{ 
 
    display:table-cell; 
 
    width:auto; 
 
}

<div id="hiderPanel" class="hider"> 
 
    <div class="inputpanel"> 
 
     <div style="float:left; margin-top:3%; width:100%;"> 
 
      <label style="float:left; width:30%;">Satir Sayisi:</label> 
 
      <input type="number" id="satir" /> 
 
     </div> 
 
     <div style="float:left; margin-top:3%; width:100%;"> 
 
      <label style="float:left; width:30%;">Sutun Sayisi:</label> 
 
      <input type="number" id="sutun" /> 
 
     </div> 
 
     <div class="btndiv"> 
 
      <button onclick="HideHider()">Devam</button> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div id="inputArea" style="margin-left:auto; margin-top:10%; margin-right:auto; width:50%; background-color:red;"> 
 
</div>

來源

2016-12-03 Furkan Ayık

我已經解決了這個問題。我創建了投入的div。並給他們顯示：table-cell;感謝大家。

來源

2016-12-03 19:15:08

動態創建輸入的問題

回答

相關問題