2017-09-15 5 views
0

2つのネストしたテーブルがあります。親テーブルの行には、子テーブルが含まれています。両方のテーブルは、必要に応じて追加ボタンで行を追加できます。親表の値は、データベースのproduct_size表に挿入され、子表の値はproduct_color表に挿入されます。親テーブルにはサイズが含まれ、子テーブルにはそのサイズのアイテムの色と数量が含まれます。私は子テーブルの値(色&数量)を親テーブルの行に挿入したい。親の最初の行の子テーブル値が親の最初の行のみに挿入され、親テーブルの2番目の行にある子テーブルの値が親の2番目の行に挿入されることを意味します。現在のところ、私のコードは、親テーブルのすべての行からすべての子テーブルの値を取り、最初の行にデータベースに挿入し、親テーブルのすべての行からすべての子テーブルの値を取り込み、データベースの2番目の行に挿入します。親テーブル。私のコードをチェックし、私のコードのどこに問題があるのか​​を教えてください。/PHP CODE/ネストされた子テーブルの値を親テーブルの行に関連付ける方法と、子テーブルの値を挿入する方法は、phpの親テーブルの行に対応しています

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."); 
      } 
     } 
    } 
} 

/HTMLとJavascript/

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;">&nbsp;Select&nbsp;</th>  
 
        <th style="text-align: center;">&nbsp;<b>Size</b>&nbsp;</th> 
 
        <th style="text-align: center;">&nbsp;<b>Color & Quantity</b>&nbsp;</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>&nbsp;Select&nbsp;</th>  
 
        <th>&nbsp;<b>Color&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity</b>&nbsp;</th> 
 
        </thead> 
 
        <TR> 
 
        <TD><INPUT type="checkbox" name="chk"/></TD> 
 
        <TD> 
 
        <select name="color[]" required="" > 
 
        <option value="">Select Color</option> 
 
        <option value="Red">Red</option> 
 
        <option value="Green">Green</option> 
 
        <option value="Yellow">Yellow</option>  
 
        <option value="Blue">Blue</option> 
 
        </select> 
 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
        <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')" />

+0

、すべてのあなたの子供あなたが言ったようにすべてのサイズとすべての色とドレスの数量をループして同じ名前(すなわち、colorまたはdress_quantity)と呼びます。代わりに、各親行size1 []、size2 [] ... sizeN []の名前を変更してから、親行size1 []に対してcolor1 []、次にsize2 []に対してcolor2 []の子カラー配列を作成すると、あなたのフォームを介して、color2 []からcolor2のみを挿入します。 –

+0

@ bio_sprite私のデータは静的ではないので、size1 []、size2 []などの名前をどのように置き換えることができますか? –

+0

助けてもらえますか? –

答えて

0

[OK]を、これは色のためだけの子テーブルの変更と単なる例です。

注 - jsbinでjavascriptとhtmlをテストしましたが、PHPの確認/テストはしていません

希望すると、これが役立ちます。

// HTML

<TABLE id="dataTable"> 
       <thead> 
        <tr> 
        <th style="text-align: center;">&nbsp;Select&nbsp;</th>  
        <th style="text-align: center;">&nbsp;<b>Size</b>&nbsp;</th> 
        <th style="text-align: center;">&nbsp;<b>Color & Quantity</b>&nbsp;</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>&nbsp;Select&nbsp;</th>  
        <th>&nbsp;<b>Color&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Quantity</b>&nbsp;</th> 
        </thead> 
        <TR> 
        <TD><INPUT type="checkbox" name="chk"/></TD> 
        <TD> 
        <select name="color1[]" required="" > 
        <option value="">Select Color</option> 
        <option value="Red">Red</option> 
        <option value="Green">Green</option> 
        <option value="Yellow">Yellow</option>  
        <option value="Blue">Blue</option> 
        </select> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <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')" /> 

        <!--this could be hidden--> 
        <INPUT type="text" id="myCounter" name="myCounter" value="1"> 

// javascriptの

function addRow(tableID) { 

     var table = document.getElementById(tableID); 
     var myCounter = document.getElementById('myCounter'); 
     var myCounterValue = myCounter.value; 
     myCounterValue++; //increment value 
     myCounter.value = myCounterValue; //set incremented value into myCounter input 

     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"); 
     //alert(tableID); 

     //Replace all occurances of parent table id's with new unique table id for child table before writing the information to DOM 
     var newTableID = table.rows[1].cells[i].innerHTML.replace(new RegExp(tableID,"g"), "dataTable" + Math.floor((Math.random() * 1000) + 1)); 

     //Replace all occurances of child table name with new name for child table before writing the information to DOM 
     var originalColorName = 'color1'; //you remove the brackets 
     newTableID = newTableID.replace(/[[\]]/g,''); //remove square brackets from name 
     var newColorName = newTableID.replace(new RegExp(originalColorName,"m"), "color" + myCounterValue + "[]"); 


     newcell.innerHTML = newColorName; 

     } 

     else //For other columns there is no need to assign unique id for controls 
     newcell.innerHTML = table.rows[1].cells[i].innerHTML; 

     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); 
     } 
    } 

// PHP

私はあなたの悩みはあなたのフォームを送信すると、その中にあるかもしれないと思う
if (isset($_POST['submit'])) 
    { 
    $con=mysqli_connect("localhost", "root", ""); 
    mysqli_select_db($con,"login"); 

    $number_of_parent_rows = $_POST['myCounter']; 
    for (var $r=1; $r <= $number_of_parent_rows; $r++){ 
     //do a check here to see if your index exists as you do not decrement your counter 
     if(!isset($_POST['color'.$r])){ 
       continue; //if index is not set, exit out of loop and go to next 
     } 

     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'.$r]); $j++){ 

      $quantity = $_POST['dress_quantity'][$j]; 

      $color = $_POST['color'.$r][$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."); 
      } 
     } 
    } 
} 
+0

私はこれまでこれをやったことはありませんが、私はあなたがここで見ることができると思うhttps://jsbin.com/zewikaqice/edit?html,css,js 、出力 –

+0

ありがとうたくさん私は –

+0

をチェックさせてくださいPHPのコードで$ pは何ですか? –

関連する問題