Problem über dynamisch erstellte Eingaben

Question

Ich erstelle dynamische Eingaben mit JavaScript. Aber ich konnte das Problem der Eingangsbreite nicht lösen. Die Eingaben werden abhängig vom gewählten Benutzer erstellt. (Wie 4 Zeilen und 6 Spalten) Ich habe ein div Zentrum der Seite.
Ich möchte das: Egal wie viele Spalte erstellt, muss Breite in diesem div. Ich meine, wenn es 4 Spalte und width:50px für jedes gibt, dann muss es 40px sein, wenn 5 Spalten erstellt werden.

Here is the same problem, aber es funktioniert nicht für mich.

Und dies ist mein Code:

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>

Answer 1

ich das Problem gelöst haben. Ich habe Divs für Eingaben erstellt. Und gab ihnen Anzeige: Tischzelle; Danke an alle.