0 
$(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/

4

3 に答える 3

0

挿入された値を json 型としてモデルに返す必要があります。

<style type="text/css">
    #table1 tr {
        vertical-align: top;
    }

        #table1 tr td {
            width: 100px;
        }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#butsend").click(function () {
            if (true) {//Check Validation
                $.ajax({
                    url: "save.php", type: "post",
                    data: $.param($('#form1').serializeArray()),
                    //data: JSON.stringify({}),//Pass json model
                    success: function (data) {
                        $("#table1").append('<tr><td>' + data.model.id + '</td><td>' + data.model.sname + '</td><td >' + data.model.age
                            + '</td><td><a class="remCF" data-id="' + data.model.id + '">Remove</a></td></tr>');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown);
                    },
                    complete: function (msg) {
                    }
                });
            }
        });

        $("#table1").on('click', '.remCF', function () {
            var $this = $(this).parents('tr');
            $.ajax({
                url: "remove.php", type: "post", dataTye: "json",
                data: { id: $(this).data('id') },
                success: function (data) {
                    $this.remove();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                },
                complete: function (msg) {

                }
            });
        });
    });
</script>

これは、ASP.net mvc 3 呼び出しコントローラー アクション メソッドの以下の例です。

私はjsonの結果を返す方法はありません私はphp

$.ajax({
     url: "/controllername/actionmethodname"
});

[HttpPost]
public JsonResult Add(News vm)
{
    using (var db = new Mvc3MDbContext())
    {
       //vm used contains id, name, etc
    }

    return Json(new { model = vm }, JsonRequestBehavior.AllowGet);
}
于 2013-09-12T15:23:41.183 に答える
0

次の手順に従ってください。

  • 分離のためのtrおよびtdタグのスクリプトを使用して一意の IDを動的に割り当てます
  • 一意の ID を使用して、tr および td タグの値を取得するだけです。
  • jsonオブジェクトに値を保存し、それを PHPにPOSTします。
  • 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);
?>
于 2013-09-13T06:25:54.950 に答える