如何將HTML表（由JavaScript動態創建）發送到PHP頁面？

Question

我使用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

Answer 1

我從評論中了解了這個問題。

現在可以了。 我需要將元素數組發送到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(); 
?>

Answer 2

$fname = $_POST['fname'];
$lname = $_POST['lname'];

foreach( $fname as $key => $n ) {
  print "The name is ".$fname." and lname is ".$lname[$key].", thank you\n";
}

如何將HTML表（由JavaScript動態創建）發送到PHP頁面？

問題描述

2 個解決方案

解決方案1
2 已采納 2019-02-18 07:40:11

解決方案2
-1 2019-02-18 06:54:05

如何將HTML表（由JavaScript動態創建）發送到PHP頁面？

問題描述

2 個解決方案

解決方案1 2 已采納 2019-02-18 07:40:11

解決方案2 -1 2019-02-18 06:54:05

解決方案1
2 已采納 2019-02-18 07:40:11

解決方案2
-1 2019-02-18 06:54:05