Question

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

我已经创建了处理信息所需的2个表和代码，第一个表从开始加载并且工作得很好，但是我无法工作的是当我点击按钮时我把表放在空（“drawOrderDetails”）现在显示并列出当前的chossen 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是可点击的按钮。

通过按钮单击（currentID）将数据从表行传递到新表

0 个答案: