如何将html表（由JavaScript动态创建）发送到PHP页面？
我使用JavaScript动态创建了一个HTML表 因此，行数不是固定的。如果单击“添加行”按钮，它将生成一个新行。下面的HTML和JavaScript代码将生成动态表 index.html如何将html表（由JavaScript动态创建）发送到PHP页面？,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我使用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"></scri
<!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>
<?php
$user_table=$_POST['userTable'];
echo $user_table;
#Next task is to process the table and store into MySQL Database
?>
$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
var actions=$（“表td:last child”）.html（）；
//在“添加新”按钮上使用“添加行”窗体追加表单击
$（“.add_new”）。单击（函数（）{
var index=$（“表tbody tr:last child”）.index（）；
变量行=“”+
'' +
'' +
'';
$（“表格”）。追加（第行）；
$（'[data toggle=“tooltip”]'）。tooltip（）；
});
//单击“添加”按钮上的“添加行”
$（文档）。在（“单击“，”.add“，函数（）上）{
var empty=false；
var input=$（this.parents（“tr”）.find（'input[type=“text”]”）；
input.each（函数（）{
if（！$（this.val（））{
$（this.addClass（“错误”）；
空=真；
}否则{
$（此）.removeClass（“错误”）；
}
});
$（this.parents（“tr”）.find（“.error”）.first（）.focus（）；
如果（！空）{
input.each（函数（）{
$（this.parent（“td”）.html（$（this.val（））；
});
}
});
//单击“删除”按钮删除行
$（文档）。在（“单击“，”.delete“，函数（）上）{
$（this.parents（“tr”）.remove（）；
$（“.add_new”）.removeAttr（“禁用”）；
});
});
名字
姓
<!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>
<?php
$user_table=$_POST['userTable'];
echo $user_table;
#Next task is to process the table and store into MySQL Database
?>
我需要帮助发送HTML JavaScript表以显示_Table.php。我从评论中理解了这个问题
$fname = $_POST['fname'];
$lname = $_POST['lname'];
foreach( $fname as $key => $n ) {
print "The name is ".$fname." and lname is ".$lname[$key].", thank you\n";
}
<tbody>
<tr>
<td><input type="text" name="fname[]"></td>
<td><input type="text" name="lname[]"></td>
</tr>
</tbody>
<?php
$fname=$_POST['fname'];
$lname=$_POST['lname'];
echo $fname[0];
echo '<br/>';
echo $fname[1];
?>
<tbody>
<tr>
<td><input type="text" name="fname[]"></td>
<td><input type="text" name="lname[]"></td>
</tr>
</tbody>
<?php
$fname=$_POST['fname'];
$lname=$_POST['lname'];
echo $fname[0];
echo '<br/>';
echo $fname[1];
?>
$\u POST['userTable']$\u POST['fname']name=“fname[]”[]$\u POST['fname']$fname[]$fname$fname