0

基本上我需要做的是将数据库中 order.OrderID 中的 currentID 传递到一个新表，并通过OrderDetails在新表中显示当前订单的 3 列，这都是 Northwinds 数据库的一部分。

我已经创建了处理信息所需的 2 个表和代码，第一个表从开始加载并且工作正常，但我无法正常工作的是，当我单击按钮时，我将表设为空（“drawOrderDetails”）现在显示并列出当前选择的 ID。所有这些都必须使用 Jquery 和 Json 完成，并通过 Ajax 动态创建表，这样服务器就不会回发，我有点困惑，因为我对 javascript 很陌生，主要是我很难弄清楚问题是什么！

这是我的 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++;
            });
        });
    }

这里是第二张桌子：

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++;
                });
            });
    }

任何答案都会有帮助，谢谢！:)

http://i.imgur.com/BbcNhhV.png：第一个加载表格的图片，不同的 ID 有可点击的按钮。

4

0 回答 0