Hinzufügen/Löschen von Tabellenzeilen basierend auf Select-Wert

Question

So habe ich ein Formular, wo der Kunde eine Option der Anzahl der Käufer, die in den Laden kommen, wählen kann. Wenn sich diese Option ändert, möchte ich, dass alle bestehenden Kundenformulare gelöscht werden und die korrekte Menge an neuen Kundenformularen erstellt wird.

https://jsfiddle.net/mfoc49Lk/

function updateShopperField() { 
 
    var shoppers = document.getElementById("shoppers").value; 
 
    var table = document.getElementById("formTable"); 
 
    var count = 0; 
 
    var children = table.childNodes; 
 
    for (var i = 0; i < children.length; i++) { 
 
    if (children[i].nodeType == 3) { 
 
     alert(children[i].textContent); 
 
    } 
 
    } 
 
    while (shoppers != count) { 
 
    var row = table.insertRow(4 + count); 
 
    var cell1 = row.insertCell(0); 
 
    cell1.setAttribute("class", "label"); 
 
    var cell2 = row.insertCell(1); 
 
    var select = document.createElement("select"); 
 
    select.setAttribute("name", "shopper" + count + "Gender"); 
 
    select.style.marginRight = "10px"; 
 

 
    var maleOption = document.createElement("option"); 
 
    maleOption.setAttribute("value", "male"); 
 
    maleOption.text = "Male"; 
 

 
    var femaleOption = document.createElement("option"); 
 
    femaleOption.text = "Female"; 
 
    femaleOption.setAttribute("value", "female"); 
 
    select.appendChild(maleOption); 
 
    select.appendChild(femaleOption); 
 
    cell2.appendChild(select); 
 

 

 
    var selectAge = document.createElement("select"); 
 
    selectAge.setAttribute("name", "shopper" + count + "Age"); 
 
    for (var i = 20; i != 100; i = i + 10) { 
 
     var option = document.createElement("option"); 
 
     option.text = i + "'s"; 
 
     option.setAttribute("value", i); 
 
     selectAge.appendChild(option); 
 

 
    } 
 
    cell2.appendChild(selectAge); 
 
    count++; 
 
    } 
 
}

@font-face { 
 
    font-family: 'Aldrich-Regular'; 
 
    src: url('aldrich/Aldrich-Regular.ttf'); 
 
} 
 
/*tags*/ 
 

 
body { 
 
    background-color: beige; 
 
    font-family: verdana; 
 
    margin: 0px; 
 
    width: 1920px; 
 
} 
 
/*classes*/ 
 

 
@keyframes resize { 
 
    0% { 
 
    font-size: 24px; 
 
    padding-right: 12.5%; 
 
    padding-left: 12.5%; 
 
    padding-bottom: 6.25%; 
 
    padding-top: 6.25%; 
 
    } 
 
    100% { 
 
    font-size: 32px; 
 
    padding-right: 14.5%; 
 
    padding-left: 14.5%; 
 
    padding-bottom: 8.25%; 
 
    padding-top: 8.25%; 
 
    } 
 
} 
 
@keyframes downsize { 
 
    0% { 
 
    font-size: 32px; 
 
    padding-right: 14.5%; 
 
    padding-left: 14.5%; 
 
    padding-bottom: 8.25%; 
 
    padding-top: 8.25%; 
 
    } 
 
    100% { 
 
    font-size: 24px; 
 
    padding-right: 12.5%; 
 
    padding-left: 12.5%; 
 
    padding-bottom: 6.25%; 
 
    padding-top: 6.25%; 
 
    } 
 
} 
 
.head { 
 
    color: white; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height: 67.5px; 
 
    background: linear-gradient(135deg, #00b7ea 0%, #009ec3 100%); 
 
    box-shadow: 1px 1px 1px 1px black; 
 
} 
 
.title_text { 
 
    position: relative; 
 
    top: -10px; 
 
    font-size: 64px; 
 
    text-shadow: 0px 0px 10px grey; 
 
} 
 
.title_text a { 
 
    text-decoration: none; 
 
    color: inherit; 
 
} 
 
.nav { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    color: black; 
 
    text-align: center; 
 
} 
 
.nav a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
.link { 
 
    font-size: 24px; 
 
    width: 100%; 
 
    height: 25%; 
 
    background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); 
 
    display: inline; 
 
    padding-right: 12.5%; 
 
    padding-left: 12.5%; 
 
    padding-bottom: 6.25%; 
 
    padding-top: 6.25%; 
 
    box-shadow: 0px 0px 10px 5px grey; 
 
    border-radius: 10px; 
 
    margin-right: 25px; 
 
    animation-name: downsize; 
 
    animation-duration: .25s; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
    animation-timing-function: ease-in-out; 
 
} 
 
.link:hover { 
 
    display: inline; 
 
    animation-name: resize; 
 
    animation-duration: .25s; 
 
    animation-iteration-count: 1; 
 
    animation-direction: alternate; 
 
    animation-timing-function: ease-in-out; 
 
    font-size: 32px; 
 
    padding-right: 14.5%; 
 
    padding-left: 14.5%; 
 
    padding-bottom: 8.25%; 
 
    padding-top: 8.25%; 
 
} 
 
.login { 
 
    float: right; 
 
    font-size: 16px; 
 
    display: inline; 
 
} 
 
.login form { 
 
    position: relative; 
 
    display: inline; 
 
    top: 45; 
 
    padding-right: 5px; 
 
} 
 
.login input { 
 
    font-size: 12; 
 
    position: relative; 
 
    top: -2; 
 
} 
 
.login input[type="submit"] { 
 
    border-radius: 3px; 
 
    border-style: solid; 
 
} 
 
.label { 
 
    text-align: right; 
 
} 
 
.enterup { 
 
    margin-top: 6.25%; 
 
    font-size: 24px; 
 
} 
 
.enterup form { 
 
    width: 430px; 
 
    position: relative; 
 
    left: calc(50% - 215px); 
 
    margin-bottom: 0px; 
 
    display: inline-block; 
 
    padding: 10px; 
 
    box-shadow: 0px 0px 10px 5px grey; 
 
    background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); 
 
} 
 
.enterup input[type="text"] { 
 
    font-size: 18px; 
 
    border: 3px green solid; 
 
    border-radius: 3px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 
.enterup input[type="text"]:focus { 
 
    border: 3px #33cc33 solid; 
 
} 
 
.enterup input[type="text"]:hover { 
 
    border: 3px #33cc33 solid; 
 
}

<body> 
 
    <div class="head"> 
 
    <img src="/public/css/logo.png" width="199px" height="67.5px" /> 
 
    <span class="title_text"><a href="/public/" >Buiseness Tools</a></span> 
 
    <div class="login"> 
 
     <form method="post" action="/public/login"> 
 
     Username: 
 
     <input type="text" name="username" />Password: 
 
     <input type="password" name="password" /> 
 
     <input type="hidden" name="token" value="<?=$data['token']?>" /> 
 
     <input type="submit" /> 
 
     </form> 
 
    </div> 
 
    </div> 
 
    <div class="enterup"> 
 
    <form method="post" action="/public/MM/EnterUp"> 
 
     <table id="formTable"> 
 
     <tr> 
 
      <td class="label">Store:</td> 
 
      <td> 
 
      <select name="store" id="store"> 
 
       <option value="1">(1) West 11th</option> 
 
       <option value="2">(2) Gateway</option> 
 
       <option value="3">(3) Corvallis</option> 
 
       <option value="4">(4) Albany</option> 
 
      </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="label">Traffic Type:</td> 
 
      <td> 
 
      <select name="traffic_type" id="traffic_type"> 
 
       <option value="NONE">Select Traffic Type</option> 
 
       <option value="BB">BB</option> 
 
       <option value="DB">DB</option> 
 
       <option value="EV">EV</option> 
 
       <option value="OTHER">OTHER</option> 
 
       <option value="RAD">RAD</option> 
 
       <option value="REF">REF</option> 
 
       <option value="SH">SH</option> 
 
       <option value="TV">TV</option> 
 
       <option value="WEB">WEB</option> 
 
      </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="label">Amount Written:</td> 
 
      <td> 
 
      <input type="text" name="written" id="written"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="label"> 
 
      Number of Shoppers: 
 
      </td> 
 
      <td> 
 
      <select name="shoppers" id="shoppers" onchange="updateShopperField();"> 
 
       <option value="0">Select Shoppers</option> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
       <option value="3">3</option> 
 
       <option value="4">4</option> 
 
       <option value="5">5</option> 
 
      </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="label">Age:</td> 
 
      <td> 
 
      <select name="age" id="age"> 
 
       <option value="-1">Select Age</option> 
 
       <option value="20">20's</option> 
 
       <option value="30">30's</option> 
 
       <option value="40">40's</option> 
 
       <option value="50">50+'s</option> 
 
      </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="label">Rejection:</td> 
 
      <td> 
 
      <select name="rej"> 
 
       <option value="0">Select Rejection</option> 
 
       <option value="AF">Afford</option> 
 
       <option value="TH">Think</option> 
 
       <option value="TI">Timing</option> 
 
       <option value="NA">Not Available</option> 
 
       <option value="SH">Shopping</option> 
 
       <option value="SP">Spouse</option> 
 
       <option value="C">Control</option> 
 
      </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="label">Mattresses Sold:</td> 
 
      <td> 
 
      <input type="text" name="mattressSold" id="mattressSold"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="label">Protectors Sold:</td> 
 
      <td> 
 
      <input type="text" name="protectorsSold" id="protectorsSold"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td class="label"></td> 
 
      <td> 
 
      <input type="submit"> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

(nicht funktioniert aber Code ist es)

Bisher kann ich es bekommen die richtige Menge an neuen Zeilen zu machen, aber ich kann‘ t es, um die richtigen Zeilen zu löschen. Entschuldige, ich bin kurz bei der Arbeit.

Answer 1

Sie können den von Ihnen erstellten Zeilen einen Klassennamen zuweisen, damit Sie sie beim Aktualisieren der Zeilenanzahl gezielt löschen können.

Wenn Sie neue Zeilen erstellen, weisen die Klasse:

var row = table.insertRow(4 + count); 
row.className = "shopper"; 

I ‚Käufer‘ hier aus Gründen als Beispiel verwendet, aber Sie alle Klassennamen verwenden, können Sie, natürlich möchten. Und das könnte vor der Schleife gehen, wo Sie beginnen, die neuen Zeilen zu erstellen:

var currentShoppers = document.getElementsByClassName("shopper"); 
while (currentShoppers[0]) { 
    currentShoppers[0].parentNode.removeChild(currentShoppers[0]); 
}