javascript - Inserting child table multiple rows for corresponding parent table single row in php -
i have 2 nested tables. parent table row contains child table. both tables can add rows if needed add button. parent table values inserts in product_size table in database , child table values inserts in product_color table. parent table contains sizes , child table contains color , quantity of items of size. want insert child table values(color & quantity) across parent table row. means parent first row child table values should insert across parent first row , child table values in second row of parent table should insert across parent second row. code takes child table values rows of parent table , inserts in database across first row , takes child table values rows of parent table again , inserts in database across second row of parent table. please check code , me point out problem in code.
/php code/
if (isset($_post['submit'])) { $con=mysqli_connect("localhost", "root", ""); mysqli_select_db($con,"login"); ($i=0; $i<count($_post['size']); $i++){ $size = $_post['size'][$i]; $qry1="insert product_size (product_size) values ('$size')"; $result1=mysqli_query($con,$qry1); $product_size_id = mysqli_insert_id($con); ($j=0; $j<count($_post['color']); $j++){ $quantity = $_post['dress_quantity'][$j]; $color = $_post['color'][$j]; $qry2="insert 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."); } } } } here snippet of 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 adds child table { //get child table id of first row var tableid = table.rows[1].cells[i].childnodes[1].getattribute("id"); //replace occurances of parent table id's new unique table id child table before writing information 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 no need assign unique id 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 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 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')" />
Comments
Post a Comment