Question

我正在尝试渲染一个表，其中每行数据都在一个单独的行上。根据我的理解，这是呈现<tr></tr>标记之间数据的默认行为。至少，这就是我一直在运作的方式。

这是我正在使用的代码：

function GetLastTen(){
    $.ajax({url: LastTen, success: function(result) {
        var location = document.getElementById('l_ten');
        location.innerHTML = "<table>\n";
        function format(location,object){
            location.innerHTML += '<tr>\n' +
                                     '<td>' + object.id + '</a></td>\n' +
                                  '</tr>\n';
        }
        $.each(result, function(elem){
            format(location, result[elem]);
        });
        location.innerHTML += "</table>"
    }});
}

代码获取正确的数据 - 我从API端点获取的内容没有任何问题，但所有行都在同一行。

我正在使用bootstrap 3.3.7和最新版本的jQuery。

Answer 1

尝试首先将HTML字符串构建到变量中，并在完成后设置innerHTML：

＆＃13;

var result = [{id:1},{id:2},{id:3}]

$(document).ready(function(){
  var location = $("#l_ten")
  var tableHTML = "<table>\n"

  function format(object){
      tableHTML += '<tr>\n<td>' + object.id + '</a></td>\n</tr>\n';
  }
  $.each(result, function(elem){
      format(result[elem]);
  });
  location.html(tableHTML);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="l_ten"></div>

＆＃13;

表行不在单独的行

1 个答案: