我使用JavaScript动态创建了一个HTML表。
因此，行数不是固定的。如果我单击添加行按钮，它将添加一个新行。以下HTML和JavaScript代码将生成动态表。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add_new").click(function(){
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" name="fname" class="form-control" ></td>' +
'<td><input type="text" name="lname" class="form-control" ></td>' +
'</tr>';
$("table").append(row);
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
}
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add_new").removeAttr("disabled");
});
});
</script>
</head>
<body>
<form action="display_table.php" id="my_form" name="my_form" method="post" >
<table id='userTable' name='userTable'>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="fname"></td>
<td><input type="text" name="lname"></td>
</tr>
</tbody>
</table>
<input type="button" id="add_new" name="add_new" class="add_new" value="Add New Row" >
<input type="submit" name="save" value="Submit">
</form>
</body>
</html>
现在，如果单击提交按钮，那么表数据应该发送到display_table.php页面。
display_table.php
<?php
$user_table=$_POST['userTable'];
echo $user_table;
#Next task is to process the table and store into MySQL Database
?>
如果表数据被接收到display_table.php，那么我将处理数据以存储到MySQL数据库中。
我需要帮助将HTML-JavaScript表发送到display_table.php
我从评论中了解了这个问题。
现在可以了。我需要将元素数组发送到PHP页面。
更改HTML代码：
<tbody>
<tr>
<td><input type="text" name="fname[]"></td>
<td><input type="text" name="lname[]"></td>
</tr>
</tbody>
name="fname" 将被替换 name="fname[]"
JavaScript变更
$(".add_new").click(function(){
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" name="fname[]" ></td>' +
'<td><input type="text" name="lname[]" ></td>' +
'</tr>';
$("table").append(row);
$('[data-toggle="tooltip"]').tooltip();
});
PHP代码更改：
<?php
$fname=$_POST['fname'];
$lname=$_POST['lname'];
echo $fname[0];
echo '<br/>';
echo $fname[1];
?>
在PHP代码中$fname是一个数组
用PHP将表数据存储到MySQL数据库中。
（这与提出的问题无关。但这可能对某人有所帮助。）
<?php
$conn = new mysqli("localhost", "root", "password", "userDB");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$fname_array=$_POST['fname'];
$lname_array=$_POST['lname'];
$fname_len=count($fname_array);
$lname_len=count($lname_array);
for($x=0;$x<$fname_len;$x++)
{
$fname=$fname_array[$x];
$lname=$lname_array[$x];
$sql = "INSERT INTO user_table(fname, lname) VALUES ('$fname', '$lname')";
if ($conn->query($sql) === TRUE)
{
echo "New record inserted successfully.";
}
else
{
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句