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

Question

我正在尝试使用 jquery 按列将数据附加到每一行。我无法实现这一点。我的目标是获取表格上的数据，如下图所示。我的 fiddle 是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>