JQuery 将子行附加到 table 的末尾

Question

我想要达到的目标：

使用ajax得到一组结果。 (id, 名字e.t.c)
在 1 上使用 id 进行另一个 ajax 调用，但是这是在函数中。
在1的success函数中调用2.

结果 2 是 1 的子行。

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

result-set-1, result-set-1-subrow;
result-set-2, result-set-2-subrow;
etc

但是它正在显示

result-set-1,
result-set-2,
result-set-1-subrow,
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

您可以像这样向 table 添加任何内容：

$("#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;
 }

JQuery 将子行附加到 table 的末尾

JQuery appending subrows to the end of the table

ajax

jquery

html-table

append