how to dynamically append tr element with css to a table


Tags: javascript,jquery,html,css

Problem :

I am looping through $.each in jquery and getting back data and appending that data to a table like this:

 $.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);
}

Now, I am getting back proper data from $.each loop. But all the data is appending one after the another.

I want to append the data something like this in this jsfiddle.https://jsfiddle.net/1pbso9jt/

My table is like this:

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


Solution :

How's this:

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


    CSS Howto..

    How to hide class=“” CSS

    How to create the corner that show in picture with css in webpage?

    How to point to a specific icon in an icon set?

    Showing refresh button when animation is complete?

    Show bigger image on thumbnail's hover

    How to incorporate specific CSS files for Responsive Design for Desktop and Mobile Browsers

    How to get the same height on two Bootstrap columns? [duplicate]

    Vertical alignment in css of multiple elements (How to achieve this layout)

    How to change tr color on mouse over when there is already implemented?

    How can I refactor some repetitive HTML and CSS?

    How to place an HTML element over another using CSS

    how to auto adjust table td width from the content

    How to reference CSS children [duplicate]

    How to place scroll bar on side of table?

    How to target individually nested elements using CSS

    How to get the value of css property with jQuery

    How to highlight table row on hover using CSS only?

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    Loop in Sass @for how to use $#{value}#{$i} correctly?

    How to set Bootstrap's hero unit height to 100%?

    How to change an input button image using CSS?

    Creating a calendar control using CSS: How to auto layout events

    How can I set the text on the right of a glyphicon into a Twitter BootStrap theme?

    Show content only in printing page not in browser page using CSS or javascript

    How to get an HTML div to dynamically expand in a horizontal direction to fit window width?

    How to make a webpage display dynamic data in real time using Python?

    How to fill the space of removed
    by left or right positioned
    ?

    How to apply an opacity without affecting a child element with html/css?

    jQuery select box Show/hide div

    How to Set custom text Color in QTextEdit?