php - 如何从jquery表中插入多个表单数据到数据库

Question

$(document).ready(function() {
    var id = 1;

    $("#butsend").click(function() {
        $("#table1").append('<tr valign="top">\n\
            <td width="100px">' + (id++) + '</td>\n\
            <td width="100px">' + $("#sname").val() + '</td>\n\
            <td width="100px">' + $("#age").val() + '</td>\n\
            <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\
        </tr>');
    });

    var serializedData = $('#form1').serialize();

    $.ajax({
        url: "save.php",
        type: "post",
        data: serializedData
    });

    $("#table1").on('click', '.remCF', function() {
        $(this).parent().parent().remove();
    });
});

<form id="form1" name="form1" method="post">
    <label>Student Name</label><input type="text" name="sname" id="sname"></br>
    <label>Student Age</label><input type="text" name="age" id="age"></br>
    <input type="button" name="send" value="send" id="butsend"></br>
    <input type="button" name="save" value="Save" id="butsave"></br>
</form>

<table id="table1" name="table1" border="0">
    <tbody>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
            <th></th>
        <tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

我使用 jQuery 将多个表单数据添加到表中。然后，我想在单击“保存”按钮时将添加的数据发送到数据库表。我的示例代码在这里。你能帮我吗？谢谢 http://jsfiddle.net/eruZC/3/

Answer 1

按照这些可能会令人沮丧的步骤进行操作。

• 使用脚本为 tr 和 td 标记动态分配唯一 ID 进行分隔
• 有了唯一的id，只需获取tr和td标签的值即可。
• 将值保存在 json 对象中，并将其POST 到 PHP。
• 使用 PHP，将从脚本接收到的值保存到 Mysql 数据库。

按照上述步骤，将其添加到您的脚本标记

    $(document).ready(function() {
    var id = 1;  
    //Assigning id and class for tr and td tags for separation.

    $("#butsend").click(function() {
        var newid = id++; 
        $("#table1").append('<tr valign="top" id="'+newid+'">\n\
            <td width="100px" >' + newid + '</td>\n\
            <td width="100px" class="name'+newid+'">' + $("#sname").val() + '</td>\n\
            <td width="100px" class="age'+newid+'">' + $("#age").val() + '</td>\n\
            <td width="100px"><a href="javascript:void(0);" class="remCF">Remove</a></td>\n\
        </tr>');

    });

    var serializedData = $('#form1').serialize();

    $.ajax({
        url: "save.php",
        type: "post",
        data: serializedData
    });

    $("#table1").on('click', '.remCF', function() {
        $(this).parent().parent().remove();
    });

   // crating new click event for save button

    $("#butsave").click(function() {
        var lastRowId = $('#table1 tr:last').attr("id"); //finds id of the last row inside table


        var name = new Array();  
        var age = new Array();   
        for ( var i = 1; i <= lastRowId; i++) {
            name.push($("#"+i+" .name"+i).html());  //pushing all the names listed in the table
            age.push($("#"+i+" .age"+i).html());   //pushing all the ages listed in the table
        }
        var sendName = JSON.stringify(name);  
        var sendAge = JSON.stringify(age);
        $.ajax({
            url: "save.php",
            type: "post",
            data: {name : sendName , age : sendAge},
            success : function(data){
                alert(data);    // alerts the response from php.
                }
        });
        });
});

将其添加到 PHP(save.php)

    <?php
$nameArr = json_decode($_POST["name"]);
$ageArr = json_decode($_POST["age"]);
$con=mysqli_connect("localhost","username","password","db_name");
// Check connection
if (mysqli_connect_errno())
{
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

for ($i = 0; $i < count($nameArr); $i++) {

    if(($nameArr[$i] != "")){       //not allowing empty values and the row which has been removed.
    $sql="INSERT INTO table_name (Name, Age)
VALUES
('$nameArr[$i]','$ageArr[$i]')";
    if (!mysqli_query($con,$sql))
    {
        die('Error: ' . mysqli_error($con));
    }
    }

}

Print  "All records added";

mysqli_close($con);
?>