javascript - 如何将 html 表(由 JavaScript 动态创建)发送到 PHP 页面?

标签 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"></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(); 
?> 

关于javascript - 如何将 html 表(由 JavaScript 动态创建)发送到 PHP 页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54741795/

相关文章:

php - 什么情况下可能不继承父字段?

javascript - 当您需要通过 Angular8 中的导航将数据传递给另一个组件时,最安全和最有效的方法是什么?

javascript - Node.js - 无法使用 $(this) 从 jquery 到达 Handlebars 元素

javascript - react Redux + redux 坚持 : only part of the data persists

javascript - PHP 文件未通过 AJAX 调用

php - 使用 PHP SDK 登录后删除 Facebook session

javascript - 出现错误,无法读取未定义的哈希值

javascript - colorbox jquery 损坏 https 错误

javascript - 删除 Div 中的元素并循环直到元素存在 Javascript

javascript - JS - 执行函数的问题