jquery - ボタンクリック (currentID) を介してテーブル行から新しいテーブルにデータを渡す

Question

基本的に私がする必要があるのは、データベースのorder.OrderIDからcurrentIDを新しいテーブルに渡し、 OrderDetailsを介して現在の注文の新しいテーブルに 3 つの列を表示することです。これはすべて Northwinds データベースの一部です。

情報を処理するために必要な 2 つのテーブルとコードを作成しました。最初のテーブルは最初から読み込まれ、正常に動作しますが、ボタンをクリックするとテーブルが空("drawOrderDetails")として配置されます。今のところ、現在選択されている ID を表示して一覧表示します。これはすべてJqueryとJsonを使用して行う必要があり、サーバーがポストバックしないようにAjaxを介してテーブルを動的に作成する必要があります。

document.ready のコードは次のとおりです。

        $(function () {

        // Laddar Order Tabellen från start!
        $(document).ready(function () {

            var url = "GetOrders.ashx";
            drawOrders(url); 
        });

        // Skapar Order Details Tabellen!
        $('.btn').click (function () {
            alert(this.id);
            drawOrderDetails(url);
        });
    });    

最初のテーブルのコードは次のとおりです。

        function drawOrders(url) {

        var data = {
            "dataType": "jsonp",
            "data": {
               "maxdelay": 3000,
               "dummy": 0,
            }
        };

        $.ajax(url, data).done(function (result) {

            var table = $("<table id='orders'>").addClass("orderTable");

            var tr = $("<tr>")
            .append($("<th>").html("Order ID"))
            .append($("<th>").html("Kund ID"))
            .append($("<th>").html("Order Datum")).appendTo(table);

            $("#orderData").append(table);

            // Startar loopen vid ID 10300 och fortsätter.
            for (var i = 52; i < result.length; i++) {

                var order = result[i];
                tr = $("<tr>")
                .append($("<button class='btn'>").html(order.OrderID))
                .append($("<td>").html(order.CustomerID))
                .append($("<td>").html(order.orderDate)).appendTo(table);

                tr = $("<tr>").attr("id", "order_" + order.OrderID);
            }

            //rita ut dom lite effektfullt!
            var tbl = tr.find("tr");
            var i = 0;
            tbl.each(function () {
                if (i % 2 == 0) {
                    // $(this).fadeIn(i * 10, "swing");
                    $(this).fadeIn("normal"); // slow, normal eller fast.
                }
                else {
                    // $(this).slideDown((lis.length * 10) - (i * 10), "swing");
                    $(this).slideDown("normal");
                }
                i++;
            });
        });
    }

そして、ここに2番目のテーブルがあります：

function drawOrderDetails(url) {

            var data = {
                "dataType": "jsonp",
                "data": {
                    "maxdelay": 3000,
                    "dummy": 0
                }
            };

            $.ajax(url, data).done(function (result) {

                var table = $("<table id='order_details'>").addClass("orderDetailsTable");

                var tr = $("<tr>")
                .append($("<th>").html("Order ID"))
                .append($("<th>").html("Enhets Pris"))
                .append($("<th>").html("Mängd")).appendTo(table);


                $("#orderDetailsData").empty().append(table);

                for (var i = 0; i < result.length; i++) {
                    var orderDetails = result[i];
                    tr = $("<tr>")
                    .append($("<td>").html(orderDetails.OrderID))
                    .append($("<td>").html(orderDetails.UnitPrice))
                    .append($("<td>").html(orderDetails.Quantity)).appendTo(table);

                    tr = $("<tr>").hide().attr("id", "order_details" + orderDetails.OrderID);
                }

                var tbl = tr.find("tr");
                var i = 0;
                tbl.each(function () {
                    if (i % 2 == 0) {
                        // $(this).fadeIn(i * 10, "swing");
                        $(this).fadeIn("normal"); // slow, normal eller fast.
                    }
                    else {
                        // $(this).slideDown((lis.length * 10) - (i * 10), "swing");
                        $(this).slideDown("normal");
                    }
                    i++;
                });
            });
    }

どんな答えでも役に立ちますthx！:)

http://i.imgur.com/BbcNhhV.png : 最初にロードされたテーブルの写真。異なる ID のクリック可能なボタンがあります。