how to dynamically append tr element with css to a table

Question

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>

can try this $.each(segment, function (index, innerSegment) { var tr; tr = $('<tr/>'); tr = $('<tr/>'); tr.append("<td rowspan="4">" + 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 rowspan="4">" + segment[i].Duration + "</td>"); tr.append("<td rowspan="4">" + segment[i].publishedFare "</td>"); $('#tableId').append(tr); } — guradio
– guradio, Commented Jun 1, 2016 at 8:47
As far as i know $('<tr/>') is not a valid element selector try $('tr') if you really want to append to a table row. Though my suggestion is to append the whole block to your #tableId. E.g. $('#tableId').append('<tr><td>' + segment[i].Airline.AirlineName + '</td></tr>');. For a nicer looking code feel free to add a line break after or before the +, I prefer my code looking like it was pure html. — aley
– aley, Commented Jun 1, 2016 at 8:54
@duke can you share the segment value so i can create a demo ? — guradio
– guradio, Commented Jun 1, 2016 at 9:01

Pete · Accepted Answer · 2016-06-01 09:47:33Z

1

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

edited Jun 1, 2016 at 9:47

answered Jun 1, 2016 at 8:54

Pete

58.8k31 gold badges132 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

duke Over a year ago

let me try it btw the demo fiddle with data is something like this jsfiddle.net/L90ra64d/8 @Pete

Pete Over a year ago

Here is your updated fiddle: jsfiddle.net/L90ra64d/9 you are unable to keep your thead though as you have changed the column structure (so it wouldn't make any sense anyway). If you want to keep your headers, it would have to be something like this: jsfiddle.net/L90ra64d/10

duke Over a year ago

i dont want header it was just for reference initially @Pete if no header no prob at all

duke Over a year ago

working fine can u tell me all the rows are sticking to each other if it is possible to have 5 px distance between each row @Pete

Pete Over a year ago

You can't really style table-rows, you would either have to add padding to the destination airport column: jsfiddle.net/L90ra64d/11 or add a spacer row: jsfiddle.net/L90ra64d/12

Mr. Hugo · Accepted Answer · 2016-06-01 08:53:35Z

0

You should combine your jsfiddle with the loop, like this:

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

answered Jun 1, 2016 at 8:53

Mr. Hugo

12.7k3 gold badges47 silver badges66 bronze badges

1 Comment

duke Over a year ago

jsfiddle.net/L90ra64d/8 this is the demo fiddle have a look at it @JoostS

Harsh · Accepted Answer · 2016-06-01 08:56:13Z

0

Try This :-

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

answered Jun 1, 2016 at 8:56

Harsh

1

Collectives™ on Stack Overflow

how to dynamically append tr element with css to a table

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related