根据Select值添加/删除表行

Adding/Deleting table rows based on Select value

本文关键字：删除添加 Select 根据更新时间：2023-09-26

所以我有一个表格，客户可以在其中选择进入商店的购物者数量。当该选项更改时，我希望删除所有现有的购物者表单，并创建正确数量的新表单。

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>

（不工作，但代码在那里）

到目前为止，我可以让它生成正确数量的新行，但我不能让它删除正确的行。对不起，我现在工作时间很短。

您可以为创建的行指定类名，以便在更新行数时专门删除它们。

创建新行时，分配类：

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

为了举例，我在这里使用了"购物者"，但你当然可以使用任何你想要的类名。这可以在开始创建新行的循环之前进行：

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