根据选择值添加/删除表格行

所以我有一个表单，客户可以选择进入商店的购物者数量的选项。当这个选项发生变化时，我希望所有现有的购物者表单都被删除并创建正确数量的新表单。根据选择值添加/删除表格行

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>

（没有工作，但代码是存在的）

到目前为止，我可以得到它，使新行的正确的量，但我可以”让它删除正确的行。对不起，我现在正在简单工作。

来源

2016-05-16 MisterQuacker

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

当您创建新行，分配类：

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

我用“顾客”在这里例如起见，但你可以使用任何你想要的类名，当然。这可以在循环之前开始创建新的行：

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

来源

2016-05-16 18:54:09

真棒！感谢您的帮助，这是删除它们的好方法！现在我可以移动到有趣的部分，并做PHP :) – MisterQuacker

根据选择值添加/删除表格行

回答

相关问题