Adding/Deleting table rows based on Select value

Question

So I'm having a form where the client can choose an option of the number of shoppers that come into the store. When that option changes I want all existing shopper forms to be deleted and create the correct amount of new ones.

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>

(isn't working but code is there)

So far I can get it to make the correct amount of new rows but i can't get it to delete the correct rows. Sorry I'm being brief, at work right now.

U-DON · Accepted Answer · 2016-05-16 18:54:09Z

1

You can assign a class name to the rows you create so that you can specifically delete them when you update the number of rows.

When you create new rows, assign the class:

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

I used 'shopper' here for the sake of example, but you can use any class name you want, of course. And this could go before the loop where you start creating the new rows:

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

answered May 16, 2016 at 18:54

U-DON

2,12815 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MisterQuacker Over a year ago

Awesome!! Thanks for the help, that's a great way of deleting them! Now I can move onto the fun part and do the php :)

Collectives™ on Stack Overflow

Adding/Deleting table rows based on Select value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related