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 have 3 sections in a row

    Using CSS to show gradient as well as an image

    How to overlap a div to an another div without changing their positions - Css

    How to set a CSS property with a variable in JQuery?

    How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

    How to add a border-bottom-image with css

    HTML/CSS How to format Text and have an Image floating next to it

    css margin-left propery - how to specify for various browsers [closed]

    Sencha Touch 2 date picker component & css: how to display hidden column names?

    How do I grey out the default text of a text box?

    How to remove space between bootstrap columns?

    How to stretch text in CSS like microsoft word?

    text over horizontal line…How do I make the line gradient?

    how to give css for arranging label, textbox and text area side by side in the same line

    How can I modify a CSS class using JavaScript?

    How can align css colums vertcally to the bottom?

    how to create navbar without float?

    Angular: How to alternate CSS classes for a list, with more than 2 classes?

    How to do a dynamic pulsating button in javascript?

    How to extend the background of a CSS-arrow to the whole page width?

    How do you make a CSS-defined table-cell scroll?

    CSS? How is this arrow made?

    How to make a Xul button bigger using css as it get focus?

    How can I make a div height automatically fit screen and expands if the content exceeds height

    How to restrict the contents in a table data() of a table to a certain limit?

    how to animate “simple jquery filtering” by using css only

    How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

    How to maintain the background image until end of the page

    how do I modify a :hover style using JavaScript / jQuery?

    How do I vertically center an img in a div?