Динамические входы не работают

Проблема, которую я имею здесь, заключается в том, что когда я пытаюсь добавить строки, функция не работает, кнопка «добавить строку» ничего не делает. Я пытаюсь захватить значения и дать им имена, как item1 [] price1 [] … Мне нужно захватить и вызвать значения с помощью php, так как я очень новичок в javascript, я не могу написать свой код только в jscript.

function addRow(tableID,ID1,ID2,ID3) { var table = document.getElementById(tableID); var table1 = document.getElementById(ID1).id; var table2 = document.getElementById(ID2).id; var table3 = document.getElementById(ID3).id; var rowCount = table.rows.length; var row = table.insertRow(rowCount); var x = document.getElementById(tableID).id; var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name="chkbox[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = "<input type='text' name="+table1+" id="+table1+"/>"; var cell3 = row.insertCell(2); cell3.innerHTML = "<input type='text' name="+table2+" id="+table2+"/>"; var cell4 = row.insertCell(3); cell4.innerHTML = "<input type='text' name="+table3+" id="+table3+"/>"; } 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) { table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </script> 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="Author" content="" /> <meta name="Keywords" content="Programmation,Web,PHP,MySQL,MariaDB" /> <meta name="Description" content="" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <HEAD> <TITLE> Add/Remove dynamic rows in HTML table </TITLE> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> <SCRIPT language="javascript"> <?php $groups = 5; //number of groups $rows = 3; //number of rows per group $arr = array('Monday','Tuesday','Wednesday','Thursday','Friday'); $arr1 = array( array(1,2,3), array(4,5,6), array(7,8,9), array(10,11,12), array(13,14,15) ); $arr2= array('soup','maindish','dessert'); for( $g = 0; $g < $groups; ++$g ) { ?> <table id='<?php echo $g; ?>'> <thead> <tr> <caption><?php echo $arr[$g]; ?></caption> </tr> <th></th> <th></th> <th width="94">Item</th> <th width="121">Price</th> <th width="84">Qty</th> </thead> <?php for( $r=0; $r < $rows; ++$r ) { ?> <form action='tablebuilder.php' method='post'> <tbody id="datatable<?php echo $arr1[$g][$r]; ?>"> <tr> <th rowspan="1000"><?php echo $arr2[$r];?></th> <td><input type='checkbox'></td> <td><input type='text' name='item<?php echo $arr1[$g][$r];?>[]' id='item<?php echo $arr1[$g][$r];?>[]'></td> <td><input type='text' name='price<?php echo $arr1[$g][$r]; ?>[]' id='price<?php echo $arr1[$g][$r]; ?>[]'></td> <td><input type='text' name='qty<?php echo $arr1[$g][$r]; ?>[]' id='qty<?php echo $arr1[$g][$r]; ?>[]'></td> <td><input type="button" value="AddRow" Onclick="addRow('datatable<?php echo $arr1[$g][$r]; ?>','item<?php echo $arr1[$g][$r];?>[]','price<?php echo $arr1[$g][$r]; ?>[]','qty<?php echo $arr1[$g][$r]; ?>[]')"/></td> <td><input type="button" value="DeleteRow" Onclick="deleteRow('datatable<?php echo $arr1[$g][$r];?>')"/></td> </tr> </tbody> <?php } } ?> </table> <input type='submit' name='submit' value='submit'/> </form> <?php if (isset($_POST['submit'])){ echo $_POST['qty1'][1]; } ?> </body> </html> 

Код html / php, который я использую здесь, состоит в том, чтобы создать 5 таблиц с 3 рядами, каждая из которых представляет собой суп, основное блюдо и десерт.

Удалите .id из вашего кода в следующих строках.

  table1 = document.getElementById(ID1).id; var table2 = document.getElementById(ID2).id; var table3 = document.getElementById(ID3).id; var x = document.getElementById(tableID).id; 

и сделать это

  table1 = document.getElementById(ID1); var table2 = document.getElementById(ID2); var table3 = document.getElementById(ID3); var x = document.getElementById(tableID);