基于条件的jQuery append:getJSON填充表格的行过滤需求
实现带条件的表格行追加
当然可以做到!你只需要在遍历manifest.json返回的数据时,增加一个简单的条件判断,跳过那些Excluded值为true的条目,就不会把它们追加到表格里了。
下面是修改后的代码示例,我会标注出核心的判断逻辑:
$.getJSON('manifest.json', function(data) { // 遍历返回的每一条数据 $.each(data, function(index, item) { // 👉 核心条件:如果Excluded为true,直接跳过当前条目 if (item.Excluded === true) { return; // 终止当前循环迭代,不执行后续的行创建代码 } // 以下是你原来创建表格行的逻辑,保持不变即可 const tableRow = $('<tr>'); tableRow.append($('<td>').text(item.YourFirstColumn)); tableRow.append($('<td>').text(item.YourSecondColumn)); tableRow.append($('<td>').text(item.YourThirdColumn)); tableRow.append($('<td>').text(item.Excluded)); // 第4列:Excluded // 可以继续追加其他列... // 将符合条件的行追加到表格中 $('#your-table-id').append(tableRow); }); });
几个需要注意的细节:
- 确保
item.Excluded的字段名和你manifest.json里的实际字段完全一致(比如如果是小写excluded,要对应修改判断条件)。 - 如果你的
Excluded值是字符串类型的"true"而非布尔值true,要把判断条件改成item.Excluded === "true"。 - 如果你是通过拼接HTML字符串的方式生成行(而不是jQuery创建元素),逻辑也是一样的:先判断,符合条件才拼接并追加,示例如下:
$.getJSON('manifest.json', function(data) { let rowHtml = ''; $.each(data, function(index, item) { if (item.Excluded === true) { return; } // 拼接符合条件的行HTML rowHtml += ` <tr> <td>${item.YourFirstColumn}</td> <td>${item.YourSecondColumn}</td> <td>${item.YourThirdColumn}</td> <td>${item.Excluded}</td> </tr> `; }); // 一次性追加到表格 $('#your-table-id').append(rowHtml); });
这种方式不仅能实现你要的排除逻辑,还能保持代码的可读性和简洁性,后续如果需要加其他过滤条件,直接在判断里补充即可~
内容的提问来源于stack exchange,提问作者Mike
相关产品推荐
相关产品推荐

