sumanth sumanth - 4 years ago 96
HTML Question

Jquery/Javasript: How to append the data by column dynamically to each row in jquery?

I am trying to append the data to each row by column-wise using jquery. I couldn't able to achieve this. My aim is to get data on the table as in the below pic. My fiddle is here. I would appreciate someone helping me solve this.

pic

Jquery:

var el = $('#dbg');
var row = el.find('tr');
var column = row.find('td');

var HtmlData = LoadData();
el.html(HtmlData);
column.html(HtmlData);
row.append(column);
el.append(row);


function LoadData()
{
var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
var html = '<div class="row s12"/>';
$.ajax({
url: dmJSON,
dataType: 'json',
async: false,
data: {},
success: function(data) {
$.each(data.route, function(key, value) {


html += '<div >' + value.no + "</div>" + "</div>"

});

}

Answer Source

You are missing the jQuery library and a + when concatenating html += '<div class="card small">' value.no + "</div>" + "</div>" in your jsfiddle. You need to also add Bootstrap libraries.

Here is a working JSfiddle

var el = $('#dbg');
var row = el.find('tr');
var column = row.find('td');

var HtmlData = LoadData();
el.html(HtmlData);


function LoadData() {
  var dmJSON = "http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
  var html = [];
  html += '<div class="row s12"/>';
  $.ajax({
    url: dmJSON,
    dataType: 'json',
    async: false,
    data: {},
    success: function(data) {
      $.each(data.route, function(key, value) {


        html += '<div class="card small col-md-6 col-sm-6 col-xs-6 ">' + value.no + "</div>" + "</div>"

      });

    }
  });
  return html;
}
.card{
  border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="dbg">
  <table>
    <thead>
      <tr>
        <th>
          head1
        </th>
        <th>
          head2
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
        </td>
        <td>
        </td>
      </tr>
    </tbody>

  </table>
  <div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download