Question

我想要实现的目标：

使用ajax获取一组结果。（id，name e.t.c）
使用id on 1进行另一次ajax调用，但这是函数。
在1的成功函数中，调用2。

这样2的结果是1的子行。

问题是jQuery在结果1之后追加2。我希望它能做到

result-set-1，result-set-1-subrow;
  result-set-2，result-set-2-subrow;
  等等

然而它正在显示

结果集-1，
  结果集-2，
  结果集-1-子行，
  result-set-2-subrow

这是我的代码

$.ajax({
url: ws_url + 'sessions',
success: function(result) {
  $.each(result, function(index, value) {
    $('#sessions').append('<tr class="details-control"><td>' + value.sessionName + '</td><td>' + value.sessionDate + '</td><td>' + value.startTime + ' - ' + value.endTime + '</td><td>' + value.Room + '</td></tr><tr><th colspan=5>Talks</th></tr><tr><th>Talk Name</th><th>Start Time</th><th>End Time</th><th>Speaker(s)</th></tr>');
    getTalks(value.sessionID);
  });
}
});

});

function getTalks(sessID) {
  $.ajax({
    url: ws_url + 'talks&sessID=' + sessID,
    success: function(result) {
      if (result !== "null" && result !== "undefined") {
        $.each(result, function(ind, val) {
          $('#sessions').append('<tr><td>' + val.talkName + '</td><td>' + val.startTime + '</td><td>' + val.endTime + '</td><td>' + val.speakers + '</td></tr>');
        });
      } else {
        $('#sessions').append('<tr><td colspan=5> No Talks </td><td>');
      }
    }
  });
}

<table id="sessions" class="table table-striped table-bordered">
  <tr>
    <th>Name</th>
    <th>Date</th>
    <th>Time</th>
    <th>Room</th>
  </tr>
</table>

Answer 1

从您的代码中，我执行了以下代码并获得了所需的输出。非常感谢。我没有使用你的html，但我使用了你编写的功能。

$.ajax({        
    url: ws_url+'sessions',
    success: function(result) {           
        $.each(result, function(index, value) {
            var result_subrow = getTalks(value.sessionID); 
            var talks = $.parseJSON(result_subrow);

            //Add Session
            $('#sessions').append('<tr class="details-control"><td>' + value.sessionName + '</td><td>' + value.sessionDate + '</td><td>' + value.startTime + ' - ' + value.endTime + '</td><td>' + value.Room + '</td></tr>');

            //Add Talks
            $.each(talks, function(i,v){
                $('#sessions').append('<tr><td>'+v.talkName+"</td><td>"+v.startTime + '</td><td>' + v.endTime + '</td><td>' + v.speakers + '</td></tr>');               
            });

        });
    }
});

function getTalks(sessID) {
  var data = $.ajax({
       url: ws_url + 'talks&sessID=' + sessID,
       async : false, 
       success: function(result) {  }
       });
  return data.responseText;
 }

Answer 2

您可以像这样在表格中添加任何内容：

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

JQuery将子行追加到表的末尾

2 个答案: