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 个答案: