我遇到的问题是，当我尝试添加行时，该功能似乎不起作用，“添加行”按钮什么也没做。我正在 try catch 值并给它们命名，例如 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);
关于javascript - 动态输入不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45564840/