Question

我在这里的问题是，当我尝试添加行时，函数似乎无法正常工作按钮'添加行'无效。我试图捕获值并给它们像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行，分别是汤，主菜和甜点。

Answer 1

从以下行的代码中删除.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);

动态输入无效

1 个答案: