如何在 for 循环中创建 table 行

Question

我在 Javascript 中的 For 循环 有点问题。这是我的代码：

$(document).ready(function() {
  $.getJSON("CAN_gen_1.json", function(json) {
    var tr;
    for (var i = 0; i < json.messages.length; i++) {
      tr = $('<tr/>');
      var details = json.messages[i];
      for (var j = 0; j <= details.signals.length; j++) {
        tr.append("<td>" + details.signals[j].start_bit + "</td>");
        tr.append("<td>" + details.signals[j].comment + "</td>");
        tr.append("<td>" + details.signals[j].bit_length + "</td>");
        tr.append("<td>" + details.signals[j].factor + "</td>");
        tr.append("<td>" + details.signals[j].offset + "</td>");
        tr.append("<td>" + details.signals[j].is_big_endian + "</td>");
        tr.append("<td>" + details.signals[j].is_signed + "</td>");
        tr.append("<td>" + details.signals[j].name + "</td>");
        $('#table_1').append(tr);
      }
    }
  });
});

我声明了一个 table 行 (tr)。我每次循环浏览我的 json 文件时都使用它。问题是我得到了包含所有数据的一行。

我想剪掉这一行以便于阅读 table。

查看快照：。

Answer 1

您必须使用

打开 for 之前的行

<tr>

在所有追加之后你应该用

关闭它

</tr>

Answer 2

您需要为每行创建一个新行

  tr = $('<tr/>');
  var details = json.messages[i];
  for (var j = 0; j <= details.signals.length; j++) {
    tr.append("<td>" + details.signals[j].start_bit + "</td>");

这些行中的第一行需要在循环中，您在循环中创建单元格。

Answer 3

发生这种情况是因为您只为每个 table 创建了一个 <tr>。

在内部循环中创建您的 trs：

$(document).ready(function() {
  $.getJSON("CAN_gen_1.json", function(json) {
    var tr;
    for (var i = 0; i < json.messages.length; i++) {
      var details = json.messages[i];
      for (var j = 0; j <= details.signals.length; j++) {
        tr = $('<tr/>');
        tr.append("<td>" + details.signals[j].start_bit + "</td>");
        tr.append("<td>" + details.signals[j].comment + "</td>");
        tr.append("<td>" + details.signals[j].bit_length + "</td>");
        tr.append("<td>" + details.signals[j].factor + "</td>");
        tr.append("<td>" + details.signals[j].offset + "</td>");
        tr.append("<td>" + details.signals[j].is_big_endian + "</td>");
        tr.append("<td>" + details.signals[j].is_signed + "</td>");
        tr.append("<td>" + details.signals[j].name + "</td>");
        $('#table_1').append(tr);
      }
    }
  });
});

这段代码有点笨拙。我建议分解出一个函数来创建行。这样就很清楚何时需要创建它们，而不必一直重复 details.signals[j]:

function tableRowForSignal(signal) {
  return $('<tr />')
   .append($("<td>").text(signal.start_bit));
   .append($("<td>").text(signal.comment));
   .append($("<td>").text(signal.bit_length));
   .append($("<td>").text(signal.factor));
   .append($("<td>").text(signal.offset));
   .append($("<td>").text(signal.is_big_endian));
   .append($("<td>").text(signal.is_signed));
   .append($("<td>").text(signal.name));
}

$(document).ready(function() {
  $.getJSON("CAN_gen_1.json", function(json) {
    var tr;
    for (var i = 0; i < json.messages.length; i++) {
      var details = json.messages[i];
      for (var j = 0; j <= details.signals.length; j++) {
        $('#table_1').append(tableRowForSignal(details.signals[j]));
      }
    }
  });
});

Answer 4

    $(document).ready(function() {
  $.getJSON("CAN_gen_1.json", function(json) {
    for (var i = 0; i < json.messages.length; i++) {
      var details = json.messages[i];
      for (var j = 0; j <= details.signals.length; j++) {
        var tr = $('<tr>');
        tr.append("<td>" + details.signals[j].start_bit + "</td>");
        tr.append("<td>" + details.signals[j].comment + "</td>");
        tr.append("<td>" + details.signals[j].bit_length + "</td>");
        tr.append("<td>" + details.signals[j].factor + "</td>");
        tr.append("<td>" + details.signals[j].offset + "</td>");
        tr.append("<td>" + details.signals[j].is_big_endian + "</td>");
        tr.append("<td>" + details.signals[j].is_signed + "</td>");
        tr.append("<td>" + details.signals[j].name + "</td>");
        tr.append("</tr>");
        $('#table_1').append(tr);
      }
    }
  });
});

如何在 for 循环中创建 table 行

How to create table rows in for loop

javascript

tablerow