JQuery 将子行附加到表的末尾

Question

我想要达到的目标：

1. 使用 ajax 获取一组结果。 （身份证、姓名等）
2. 使用 1 上的 id 进行另一个 ajax 调用，但是这是在函数中。
3. 在1的成功函数中，调用2。

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

问题是 jQuery 在结果 1 之后附加了 2。我希望它会这样做

result-set-1, result-set-1-subrow;
结果集 2，结果集 2 子行；
等等

不管怎么显示

结果集-1，
结果集 2，
结果集 1-subrow，
结果集 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

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

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

Answer 2

从您的代码中，我执行了以下代码并获得了所需的输出。太感谢了。我没有使用你的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;
 }