我有大小，颜色和数量的Html表意味着管理员可以选择大小，然后在该大小管理员可以选择该大小的颜色和数量。如果该尺寸有更多颜色，管理员可以添加行以为该尺寸添加更多颜色。如果这件衣服的尺码更大，那么同样的情况下，管理员也可以添加更多的行。我这样做是嵌套表。颜色和数量是子表（嵌套）。
现在当添加子表行时，它工作正常但问题来了，如果我为父表添加新行，它复制第一行的子表中的所有行而不是仅复制第一行，还有一个问题是，如果我在父表的第二行，我想添加或删除子表行然后在父表的第二行添加子表的新删除按钮将添加或删除父表的第一行中的子表行。
function dropdownlistsize(listindex1) {
document.form1.size.options.length = 0;
switch (listindex1) {
case "MEN":
document.form1.size.options[0] = new Option("Select Size", "");
document.form1.size.options[1] = new Option("Small", "Small");
document.form1.size.options[2] = new Option("Medium", "Medium");
document.form1.size.options[3] = new Option("Large", "Large");
document.form1.size.options[4] = new Option("X-Large", "X-Large");
document.form1.size.options[5] = new Option("XX-Large", "XX-Large");
break;
case "WOMEN":
document.form1.size.options[0] = new Option("Select Size", "");
document.form1.size.options[1] = new Option("Small", "Small");
document.form1.size.options[2] = new Option("Medium", "Medium");
document.form1.size.options[3] = new Option("Large", "Large");
document.form1.size.options[4] = new Option("X-Large", "X-Large");
break;
case "KIDS":
document.form1.size.options[0] = new Option("Select Size", "");
document.form1.size.options[1] = new Option("X-Small", "X-Small");
document.form1.size.options[2] = new Option("Small", "Small");
document.form1.size.options[3] = new Option("Medium", "Medium");
document.form1.size.options[4] = new Option("Large", "Large");
break;
}
return true;
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
if (rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
function addRow1(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}table {
border-collapse: collapse;
width: 100%;
border: 1px solid #1E90FF;
}
th,
td {
text-align: left;
padding: 8px;
border: 1px solid #1E90FF;
}
th {
background-color: #1E90FF;
color: white;
}<form id="form1" class="contact-form" name="form1" method="post" action="" enctype="multipart/form-data">
<div><br/>
<label>Gender<font color="red"></font></label>
<select style="margin: -10px 40px 40px 75px;" name="dress_gender" id="dress_gender" onchange="javascript: dropdownlistsize(this.options[this.selectedIndex].value);" required>
<option value="">Select Gender</option>
<option value="MEN">MEN</option>
<option value="WOMEN">WOMEN</option>
<option value="KIDS">KIDS</option>
</select>
</div>
<table id="dataTable">
<thead>
<tr>
<th style="text-align: center;"> Select </th>
<th style="text-align: center;"> <b>Size</b> </th>
<th style="text-align: center;"> <b>Color & Quantity</b> </th>
</tr>
</thead>
<tbody>
<tr id='C1' class='customer'>
<td><input type="checkbox" name="chk" /></td>
<td><select name="size[]" id="size" required="">
<option value="">Select Size</option></select></td>
<td>
<table style="margin-top: 20px;" id="dataTable1" width="400px" border="1">
<thead>
<th> Select </th>
<th> <b>Color Quantity</b> </th>
</thead>
<tr>
<td>
<input type="checkbox" name="chk" />
</td>
<td>
<select name="color[]" required="">
<option value="">Select Color</option>
<option value="Alizarin">Alizarin</option>
<option value="Amaranth">Amaranth</option>
<option value="Amber">Amber</option>
<option value="Amethyst">Amethyst</option>
<option value="Apricot">Apricot</option>
<option value="Aqua">Aqua</option>
<option value="Aquamarine">Aquamarine</option>
<option value="Asparagus">Asparagus</option>
<option value="Auburn">Auburn</option>
<option value="Azure">Azure</option>
<option value="Beige">Beige</option>
<option value="Bistre">Bistre</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Blue Green">Blue Green</option>
<option value="Blue Violet">Blue Violet</option>
<option value="Bondi Blue">Bondi Blue</option>
<option value="Brass">Brass</option>
<option value="Bronze">Bronze</option>
<option value="Brown">Brown</option>
<option value="Buff">Buff</option>
<option value="Burgundy">Burgundy</option>
<option value="Burnt Orange">Burnt Orange</option>
<option value="Burnt Sienna">Burnt Sienna</option>
<option value="Burnt Umber">Burnt Umber</option>
<option value="Camouflage Green">Camouflage Green</option>
<option value="Caput Mortuum">Caput Mortuum</option>
<option value="Cardinal">Cardinal</option>
<option value="Carmine">Carmine</option>
<option value="Carrot orange">Carrot orange</option>
<option value="Celadon">Celadon</option>
<option value="Cerise">Cerise</option>
<option value="Cerulean">Cerulean</option>
<option value="Champagne">Champagne</option>
<option value="Charcoal">Charcoal</option>
<option value="Chartreuse">Chartreuse</option>
<option value="Cherry Blossom Pink">Cherry Blossom Pink</option>
<option value="Chestnut">Chestnut</option>
<option value="Chocolate">Chocolate</option>
<option value="Cinnabar">Cinnabar</option>
<option value="Cinnamon">Cinnamon</option>
<option value="Cobalt"> Cobalt</option>
<option value="Copper">Copper</option>
<option value="Coral">Coral</option>
<option value="Corn">Corn</option>
<option value="Cornflower">Cornflower</option>
<option value="Cream">Cream</option>
<option value="Crimson">Crimson</option>
<option value="Cyan">Cyan</option>
<option value="Dandelion">Dandelion</option>
<option value="Denim">Denim</option>
<option value="Ecru">Ecru</option>
<option value="Emerald">Emerald</option>
<option value="Eggplant">Eggplant</option>
<option value="Falu red">Falu red</option>
<option value="Fern green">Fern green</option>
<option value="Firebrick">Firebrick</option>
<option value="Flax">Flax</option>
<option value="Forest green">Forest green</option>
<option value="French Rose">French Rose</option>
<option value="Fuchsia">Fuchsia</option>
<option value="Gamboge">Gamboge</option>
<option value="Gold">Gold</option>
<option value="Goldenrod">Goldenrod</option>
<option value="Green">Green</option>
<option value="Grey">Grey</option>
<option value="Han Purple">Han Purple</option>
<option value="Harlequin">Harlequin</option>
<option value="Heliotrope">Heliotrope</option>
<option value="Hollywood Cerise">Hollywood Cerise</option>
<option value="Indigo">Indigo</option>
<option value="Ivory">Ivory</option>
<option value="Jade">Jade</option>
<option value="Kelly green">Kelly green</option>
<option value="Khaki">Khaki</option>
<option value="Lavender">Lavender</option>
<option value="Lawn green">Lawn green</option>
<option value="Lemon">Lemon</option>
<option value="Lemon chiffon">Lemon chiffon</option>
<option value="Lilac">Lilac</option>
<option value="Lime">Lime</option>
<option value="Lime green">Lime green</option>
<option value="Linen">Linen</option>
<option value="Magenta">Magenta</option>
<option value="Magnolia">Magnolia</option>
<option value="Malachite">Malachite</option>
<option value="Maroon">Maroon</option>
<option value="Mauve">Mauve</option>
<option value="Midnight Blue">Midnight Blue</option>
<option value="Mint green">Mint green</option>
<option value="Misty rose">Misty rose</option>
<option value="Moss green">Moss green</option>
<option value="Mustard">Mustard</option>
<option value="Myrtle">Myrtle</option>
<option value="Navajo white">Navajo white</option>
<option value="Navy Blue">Navy Blue</option>
<option value="Ochre">Ochre</option>
<option value="Office green">Office green</option>
<option value="Olive">Olive</option>
<option value="Olivine">Olivine</option>
<option value="Orange">Orange</option>
<option value="Orchid">Orchid</option>
<option value="Papaya whip">Papaya whip</option>
<option value="Peach">Peach</option>
<option value="Pear">Pear</option>
<option value="Periwinkle">Periwinkle</option>
<option value="Persimmon">Persimmon</option>
<option value="Pine Green">Pine Green</option>
<option value="Pink">Pink</option>
<option value="Platinum">Platinum</option>
<option value="Plum">Plum</option>
<option value="Powder blue">Powder blue</option>
<option value="Puce">Puce</option>
<option value="Prussian blue">Prussian blue</option>
<option value="Psychedelic purple">Psychedelic purple</option>
<option value="Pumpkin">Pumpkin</option>
<option value="Purple">Purple</option>
<option value="Quartz Grey">Quartz Grey</option>
<option value="Raw umber">Raw umber</option>
<option value="Razzmatazz">Razzmatazz</option>
<option value="Red">Red</option>
<option value="Robin egg blue">Robin egg blue</option>
<option value="Rose">Rose</option>
<option value="Royal blue">Royal blue</option>
<option value="Royal purple">Royal purple</option>
<option value="Ruby">Ruby</option>
<option value="Russet">Russet</option>
<option value="Rust">Rust</option>
<option value="Safety orange">Safety orange</option>
<option value="Saffron">Saffron</option>
<option value="Salmon">Salmon</option>
<option value="Sandy brown">Sandy brown</option>
<option value="Sangria">Sangria</option>
<option value="Sapphire">Sapphire</option>
<option value="Scarlet">Scarlet</option>
<option value="School bus yellow">School bus yellow</option>
<option value="Sea Green">Sea Green</option>
<option value="Seashell">Seashell</option>
<option value="Sepia">Sepia</option>
<option value="Shamrock green">Shamrock green</option>
<option value="Shocking Pink">Shocking Pink</option>
<option value="Silver">Silver</option>
<option value="Sky Blue">Sky Blue</option>
<option value="Slate grey">Slate grey</option>
<option value="Smalt">Smalt</option>
<option value="Spring bud">Spring bud</option>
<option value="Spring green">Spring green</option>
<option value="Steel blue">Steel blue</option>
<option value="Tan">Tan</option>
<option value="Tangerine">Tangerine</option>
<option value="Taupe">Taupe</option>
<option value="Teal">Teal</option>
<option value="Tenné">Tenné</option>
<option value="Terra cotta">Terra cotta</option>
<option value="Thistle">Thistle</option>
<option value="Titanium White">Titanium White</option>
<option value="Tomato">Tomato</option>
<option value="Turquoise">Turquoise</option>
<option value="Tyrian purple">Tyrian purple</option>
<option value="Ultramarine">Ultramarine</option>
<option value="Van Dyke Brown">Van Dyke Brown</option>
<option value="Vermilion">Vermilion</option>
<option value="Violet">Violet</option>
<option value="Viridian">Viridian</option>
<option value="Wheat">Wheat</option>
<option value="White">White</option>
<option value="Wisteria">Wisteria</option>
<option value="Xanthic">Xanthic</option>
<option value="Yellow">Yellow</option>
<option value="Zucchini">Zucchini</option>
</select>
<input style="width: 120px; height: 26px; " oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" name="dress_quantity[]" class="qty1" onchange="calculate();" min="1" max="1000" maxlength="4"
placeholder="Size Quantity" value="" required="">
</td>
</tr>
</table>
<input type="button" value="Add Row" onclick="addRow1('dataTable1')" />
<input type="button" value="Delete Row" onclick="deleteRow1('dataTable1')" />
</td>
</tr>
</tbody>
</table>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<br/><br/>
</form>