javascript - 循环遍历动态表时遇到问题
问题描述
我有一张包含以下元素的表格。Jack Smith 是一个示例行。我有多行这样的。
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);
}
解决方案
填充单元格时,在以下条件下附加单元格值:
- 我们在标题行
- 我们在第 1-6 列(
colIndex
0-5),或 - 我们在第 7 列或第 8 列,因为第 6 列的值为“错误”
我们可以使用它来选择:
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>
推荐阅读
- javascript - react-native 中的分析器损坏(V8 和 systrace)
- python - 如何停止 docker 数据库容器
- ios - 从 Nativescript 5 -Nativescript 6 迁移 - IPA 文件大小在发布版本中太大
- firebase - 在 Firebase 中向同一项目下的多个应用发送推送通知
- php - 本地和远程网站之间的通信
- ruby - 如何将所有文件和子文件夹从一个文件夹复制到 Ruby 中同一 AWS S3 存储桶中的另一个文件夹
- android - Android ViewModel 如何确保它必须绑定相同的 Activity 或 Fragment(在屏幕旋转的情况下)?
- javascript - Prebid.js - 一个接一个地运行多个拍卖
- windows - 在 Windows Cygwin 中使用 XARGS 执行多个命令
- java - Java替换/改进空检查