如何将嵌套的子表值与父表行关联并插入子表值对应于php中的父表行
Posted
技术标签:
【中文标题】如何将嵌套的子表值与父表行关联并插入子表值对应于php中的父表行【英文标题】：how to associate nested child table values with parent table row and inserts child tables values corresponds to that parent table row in php 【发布时间】：2017-09-15 07:19:45 【问题描述】：我有 2 个嵌套表。父表行包含子表。如果需要，两个表都可以通过添加按钮添加行。父表值插入到数据库的 product_size 表中，子表值插入到 product_color 表中。父表包含大小，子表包含该大小的项目的颜色和数量。我想在父表行中插入子表值（颜色和数量）。意味着父第一行子表值应仅跨父第一行插入，父表第二行中的子表值应跨父第二行插入。目前，我的代码从父表的所有行中获取所有子表值，并在第一行中插入数据库，然后再次从父表的所有行中获取所有子表值，并在数据库的第二行中插入父表。请检查我的代码并帮助我指出我的代码中的问题所在。 /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;"> 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" 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="Red">Red</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Blue">Blue</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')" />【问题讨论】：
我认为您的麻烦可能在于，当您提交表单时，您的所有孩子都被称为相同的名称（即颜色或dress_quantity），然后您像您一样遍历所有尺寸和所有颜色和衣服数量说过。相反，如果您重命名每个父行 size1[]、size2[] ...sizeN[]，然后重命名您的子颜色数组、父行 size1[] 的 color1[]，然后 size2[] 的 color2[]，您可以迭代通过您的表单并仅插入 color2[] 中的颜色 for size2[] @bio_sprite 我如何替换像 size1[],size2[] 这样的名称，因为我的数据不是静态的？ 你能帮忙吗？ 我看到你从第一个父行的子行复制内部 html (function addRow1, newcell.innerHTML = table.rows[1].cells[i].innerHTML;) 如果你创建颜色每次下拉元素和数量输入元素，你可以简单地使用 setAttribute element.setAttribute("name", "someName3"); 更改名称属性。 哎呀，我的意思是 addRow（不是 addRow1）。我看到您使用替换为表格提供了新的 ID。也许您可以使用类似的方式搜索 size[] 并将其替换为 size1[] 【参考方案1】：好的，这只是一个示例，仅更改子表的颜色：
注意-我在 jsbin 中测试了 javascript 和 html，但没有确认/测试 php
希望这会有所帮助！
//html
<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" border="1">
<thead>
<th> Select </th>
<th> <b>Color Quantity</b> </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>
<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.");
【讨论】：
我以前从未这样做过，但我想你可以在这里查看jsbin.com/zewikaqice/edit?html,css,js,output 糟糕，应该是 $r...但请检查柜台。我忘了原来的颜色没有数字所以不包括在内。我认为您应该能够通过将初始颜色 [] 更改为 color1 [] 然后确保更改正则表达式来修复 另外请注意，我的正则表达式替换假定没有其他您不想被替换的“颜色”实例以上是关于如何将嵌套的子表值与父表行关联并插入子表值对应于php中的父表行的主要内容，如果未能解决你的问题，请参考以下文章