Inserting child table multiple rows across parent table single row in php - php

Question

I have 2 nested tables. Parent table row contains child table. Both tables can add rows if needed by add button. parent table values inserts in product_size table in database and child table values inserts in product_color table. Parent table contains sizes and child table contains color and quantity of items of that size. i want to insert child table values(color & quantity) across parent table row. Means parent first row child table values should insert across parent first row only and the child table values that is in second row of parent table should insert across parent second row. Currently my code takes all Child table values from all rows of parent table and inserts in database across first row and then takes all Child table values from all rows of parent table again and inserts in database across second row of parent table. Please Check my code and help me point out where is the problem in my code. here is the picture of my Html table.
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);
if (i == colCount - 1) //last column which adds child table
{
//Get child table id of first row
var tableID = table.rows[1].cells[i].childNodes[1].getAttribute("id");
//Replace all occurances of parent table id's with new unique table id for child table before writing the information to DOM
newcell.innerHTML = table.rows[1].cells[i].innerHTML.replace(new RegExp(tableID,"g"), "dataTable" + Math.floor((Math.random() * 1000) + 1));
}
else //For other columns there is no need to assign unique id for controls
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;
}
}
}
function deleteRow1(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);
}
}
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;
}
<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>
<option value="Small">Small</option>
<option value=">Medium">Medium</option>
<option value="Large">Large</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" 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')" />
PHP CODE:
if (isset($_POST['submit']))
{
$con=mysqli_connect("localhost", "root", "");
mysqli_select_db($con,"login");
for ($i=0; $i<count($_POST['size']); $i++){
$size = $_POST['size'][$i];
$qry1="INSERT INTO product_size (product_size) VALUES ('$size')";
$result1=mysqli_query($con,$qry1);
$product_size_id = mysqli_insert_id($con);
for ($j=0; $j<count($_POST['color']); $j++){
$quantity = $_POST['dress_quantity'][$j];
$color = $_POST['color'][$j];
$qry2="INSERT INTO product_color (product_size_id, product_color, product_quantity) VALUES ('$product_size_id', '$color', '$quantity')";
$result2=mysqli_query($con,$qry2);
if($result2)
{
echo '<script>alert("Record Added Successfully!")</script>';
echo '<script>window.location="try.php"</script>';
}
else
{
die("Error While Adding Stock! Please Try Again.");
}
}
}
}