使用 jquery 在 HTML 表中追加行不起作用

Posted

技术标签:

【中文标题】使用 jquery 在 HTML 表中追加行不起作用【英文标题】:Append rows in HTML table with jquery is not working 【发布时间】:2019-02-14 05:06:07 【问题描述】:

我正在使用for 循环使用jquery 在我的html 表中追加多行。

for 循环(下面的代码) 在返回 array of arraysajax 调用的响应上运行。但无论否,只有 1 行被添加到表中。数组中的元素。

实际响应对象很大,所以附上Google Drive link for a reference

如何追加表格中的所有行?

代码 sn-p(使用 Jquery)

$(document).ready(function() 
            $('#ghsubmitbtn').on('click', function(e) 

                var data = JSON.stringify(JSONObj);

                $.ajax(
                    url: 'https://api-crt.cert.havail.sabre.com/v4.2.0/shop/flights?mode=live&limit=50&offset=1',
                    method: 'POST',
                    contentType: "application/json; charset=utf-8",
                    data: data,
                    headers: 
                        "Authorization": 'Bearer ' + bat
                    ,

                    success: function(data) 
                        var BookBtn = '<input type="submit" value="Book" name="book" class="btn btn-primary">';

                        for (var v = 0; v <= 999; v++) 
                            for (var b = 0; b <= 999; b++) 
                                for (var m = 0; m <= 999; m++) 

                                    var row = $('<tr><td>' + data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].SequenceNumber + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureDateTime + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalDateTime + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureAirport.LocationCode + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalAirport.LocationCode + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureDateTime + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalDateTime + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].DepartureAirport.LocationCode + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].ArrivalAirport.LocationCode + '</td><td>' +
                                        data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m].OperatingAirline.Code + '</td><td>' +
                                        BookBtn + '</td></tr>');

                                    $('#tblData').append(row);
                                
                            
                        
                    
                );
            );

【问题讨论】:

【参考方案1】:

问题

控制台中未定义 JSON 属性的 JSON 异常

分辨率

javascript 中安全地访问深度嵌套的值

Read this 文章以避免将来出现 JSON 异常。

更正

if (data && data.OTA_AirLowFareSearchRS && data.OTA_AirLowFareSearchRS.PricedItineraries && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v] && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b] && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment && data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[b].FlightSegment[m]) 
    // Build row using nested JSON

Corrected JSFiddle


P.S 要快速调试,您必须始终检查 browser console 以查找任何 JSON 异常。几乎 90% 的问题都可以通过显示的错误字符串得到解决。为了理解真正的问题,我做了同样的事情:)

【讨论】:

我是这样编辑的。但是,我仍然只收到 1 条回复。我该如何解决这个问题?? 我已经更新了我的答案。这绝对应该解除对您的阻止。让我参与进来:) 成功了!!还有如何获得data.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItineraryPricingInfo[0].ItinTotalFare.BaseFare.Amountdata.OTA_AirLowFareSearchRS.PricedItineraries.PricedItinerary[v].AirItinerary.OriginDestinationOptions.OriginDestinationOption[0].FlightSegment[0].TPA_Extensions.Mileage.Amount。我试过这样。但是,我无法得到回应。 提示 - 使用调试器检查值直到嵌套 JSON 的前一个键(一个接一个) 我试过了..但是,我做不到..如果可以的话,请给我一些帮助..

以上是关于使用 jquery 在 HTML 表中追加行不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Jquery在点击时选择表格行不起作用

使用 jQuery 将新行追加到表中 [重复]

在我追加新行后,select2 不起作用

追加后Jquery选择器不起作用

SQLite 删除特定行不起作用

使用ajax jQuery for-each函数在表中追加多个数据