Jquery / JavaScript：如何按列动态地将数据附加到jquery中的每一行？

Question

我正在尝试使用jquery按列顺序将数据附加到每一行。我无法实现这一目标。我的目标是在桌子上获取数据，如下图所示。我的小提琴是here。我很感激有人帮我解决这个问题。

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 1

在jQuery中连接+时，您错过了html += '<div class="card small">' value.no + "</div>" + "</div>"库和jsfiddle。您还需要添加Bootstrap个库。

这是一个有效的 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>

Answer 2

我修复了它here。我修复了所有代码。检查一次。

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 class="card small">' + value.no + "</div>" + "</div>" 
        });
                el.html(html);
    }
});
}