我在遍历动态表时遇到问题

时间:2020-05-25 18:39:24

标签: javascript html

我有一个包含以下元素的表格。杰克·史密斯(Jack Smith)是示例行。我有这样多行。

   Divider(
      color: Colors.black,
      height: 20,
      thickness: 0.5,
      indent: 20,
      endIndent: 0,
    ),

我正在动态地创建此表,如下所示。我的问题是关于col6、7和8。会有一些行没有col6作为错误。我希望仅当col6有错误时,由error_code和error_desc填充col7和col8。我该如何实现?我不确定从哪里开始?基本上,如果col6没有“错误”值,我不想遍历col7和col8。

col1    col2   col3      col4   col5     col6       col7       col8
jack    smith  23        Y        Y      error  error_code error_desc

1 个答案:

答案 0 :(得分:0)

填充单元格时,请在以下条件下附加单元格值:

  1. 我们在标题行
  2. 我们位于1-6列(colIndex 0-5),或
  3. 假设第6列的值为“错误”,我们位于第7列或第8列

我们可以使用以下方法进行选择:

if( rowIndex == 0 || colIndex < 6 || (colIndex == 6 || colIndex == 7) && r[5].toLowerCase().trim() === "error") {
  row.append(cell);
}

这是一个正在运行的演示(我已对代码的某些部分进行了一些更改):

data = [
  ['col1', 'col2', 'col3', 'col4', 'col5', 'col6', 'col7', 'col8'],
  ['jack', 'smith', '23', 'Y', 'Y', 'error', 'error_code', 'error_desc'],
  ['jack2', 'smith2', '232', 'Y2', 'Y2', 'no_error', 'error_code2', 'error_desc2']
];

function makeTable(container) {
  var table = $("<table/>");

  $.each(data, function(rowIndex, r) {
    var row = $("<tr/>");

    $.each(r, function(colIndex, c) {
      var cellMarkup = "<t" + (rowIndex == 0 ? "h" : "d") + "/>";
      var cell = $(cellMarkup);
      cell.text(c);

      if (colIndex == 5) {
        if (c.toLowerCase().trim() === "error") {
          cell.addClass("error blink");
        }
      }

      if (rowIndex == 0 || colIndex < 6 || (colIndex == 6 || colIndex == 7) && r[5].toLowerCase().trim() === "error") {
        row.append(cell);
      }
    });
    table.append(row);
  });

  return container.html(table);
}

makeTable($('.container'))
.error {
  color: red;
}
.blink {
  /* oh god no ;-) */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>