Как отправить HTML-таблицу (динамически создаваемую JavaScript) на страницу PHP? - PullRequest
Новая
       2

Как отправить HTML-таблицу (динамически создаваемую JavaScript) на страницу PHP?

0 голосов
/ 18 февраля 2019

Я создал HTML-таблицу с использованием JavaScript динамически.

Итак, количество строк не фиксировано.Если я нажму кнопку «Добавить строку», она создаст одну новую строку.Следующий код 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

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Я понял вопрос по комментариям.

Теперь это работает.Мне нужно отправить массив элементов на страницу 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 естьмассив

Для сохранения этих данных таблицы в базе данных MySQL с помощью PHP.

(Это не относится к заданному вопросу. Но это может быть полезно для кого-то.)

<?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(); 
?>
0 голосов
/ 18 февраля 2019 
$fname = $_POST['fname'];
$lname = $_POST['lname'];

foreach( $fname as $key => $n ) {
  print "The name is ".$fname." and lname is ".$lname[$key].", thank you\n";
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...