javascript - 如何将带有CSS的tr元素动态附加到表中

Question

我在 jquery 中循环遍历 $.each 并取回数据并将该数据附加到这样的表中:

 $.each(segment, function (index, innerSegment) {
 var tr;
 tr = $('<tr/>');
 tr.append("<td>" + segment[i].Airline.AirlineName + "</td>");

 tr.append("<td>" + segment[i].ArrivalTime + "</td>");
 tr.append("<td>" + segment[i].Origin "</td>"); 

 tr.append("<td>" + segment[i].DepartureTime + "</td>");
 tr.append("<td>" + segment[i].Destination "</td>"); 

 tr.append("<td>" + segment[i].Duration + "</td>");
 tr.append("<td>" + segment[i].publishedFare "</td>");
 $('#tableId').append(tr);
}

现在，我正在从 $.each 循环中取回正确的数据。但是所有的数据都在一个接一个地追加。

我想在此 jsfiddle 中附加类似这样的数据。 https://jsfiddle.net/1pbso9jt/

我的表是这样的:

<table id="tableId">
     <tr>   
       </tr>
 </table>

Answer 1

怎么样:

var table = $('#tableId');
$.each(segment, function (index, innerSegment) {
  var rows = '<tr><td rowspan="4" width="25%">' + segment[i].Airline.AirlineName + "</td>";
  rows += '<td width="25%">' + segment[i].ArrivalTime + "</td>";
  rows += '<td rowspan="4" width="25%">&nbsp;</td>';
  rows += '<td rowspan="4" width="25%">' + segment[i].publishedFare + "</td></tr>";
  rows += "<tr><td>" + segment[i].Origin + "</td></tr>"; 
  rows += "<tr><td>" + segment[i].DepartureTime + "</td></tr>";
  rows += "<tr><td>" + segment[i].Destination + "</td></tr>"; 

  table.append(rows);
});

Example fiddle with the each commented out

Updated fiddle with your data