循环遍历动态表时遇到问题

Question

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

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

我正在动态形成这个表，如下所示。 我的问题是关于 col6、7 和 8。会有一些行没有 col6 作为错误。 只有当 col6 有错误时，我才希望 col7 和 col8 由 error_code 和 error_desc 填充。 我怎样才能做到这一点？ 我不确定从哪里开始？ 基本上，如果 col6 没有“错误”值，我不想遍历 col7 和 col8。

    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){   --> I am doing this to flag an error in red. Nothing related to the posed question.
                if( $.trim(c.toLowerCase() ) === "error" ){
                    cell.addClass("error blink");
                }
        }  

            row.append(cell);               
        });
        table.append(row);                              
    });

    return container.html(table);


} 

Answer 1

填充单元格时，append 单元格值在以下条件下：

1. 我们在 header 行
2. 我们在第 1-6 列（ colIndex 0-5），或者
3. 我们在第 7 列或第 8 列，因为第 6 列的值为“错误”

我们可以使用这个 select ：

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>