如何动态地将带有css的tr元素附加到表中

时间:2016-06-01 08:43:42

标签: javascript jquery html css

我在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>

3 个答案:

答案 0 :(得分:1)

这是怎么回事:

panel1.AutoScrollPosition = new Point(-(panel1.AutoScrollPosition.X + e.X - startPoint.X),
                                      -(panel1.AutoScrollPosition.Y + e.Y - startPoint.Y));

Example fiddle with the each commented out

Updated fiddle with your data

答案 1 :(得分:0)

你应该将你的jsfiddle与循环结合起来,如下所示:

$.each(segment, function (index, innerSegment) {
  var output;
  output = $('<table border="1"style="width:100%"><tr>');
  output.append("<td rowspan="4"style="width:25%">" + segment[i].Airline.AirlineName + "</td>");
  output.append("<td height="58">" + segment[i].ArrivalTime + "</td>");
  ...
  etcetera
  ...
  $('#tableId').append(output);
}

答案 2 :(得分:0)

试试这个: -

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

 tr+= "<td>" + segment[i].ArrivalTime + "</td>";
 tr+= "<td>" + segment[i].Origin "</td>";

 tr+= "<td>" + segment[i].DepartureTime + "</td>";
 tr+= "<td>" + segment[i].Destination "</td>"; 

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