如何用JavaScript过滤HTML表格中空值或Null值的行？

问题描述 #

我用从Stack Overflow找到的JavaScript代码从Google Sheets拉取数据生成HTML表格，代码能正常运行，但我想不渲染包含空值或Null值的行。我没有JavaScript开发经验，在C语言里我会用数组存当前行的值再校验有效性，想问这种思路在JS里可行吗？自己尝试解决没成功。

原代码如下：

var id = '1n-rjSYb63Z2jySS3-M0BQ78vu8DTPOjG-SZM4i8IxXI';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("json").innerHTML=myItems(data.slice(47, -2))  
  );
function myItems(jsonString){
  var json = JSON.parse(jsonString);
  var table = '<table><tr>'
  json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
  table += '</tr>'
  json.table.rows.forEach(ligne => {
    table += '<tr>'
    ligne.c.forEach(cellule => {
        try{var valeur = cellule.f ? cellule.f : cellule.v}
        catch(e){var valeur = ''}
        table += '<td>' + valeur + '</td>'
      }
    )
    table += '</tr>'
    }
  )
  table += '</table>'
  return table
}

解决方案 #

你说的C语言思路在JS里完全可行，核心就是先校验每行的所有单元格是否存在空值/Null，只有当整行都非空时才渲染这一行。

修改后的代码如下：

var id = '1n-rjSYb63Z2jySS3-M0BQ78vu8DTPOjG-SZM4i8IxXI';
var gid = '0';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("json").innerHTML=myItems(data.slice(47, -2))  
  );
function myItems(jsonString){
  var json = JSON.parse(jsonString);
  var table = '<table><tr>'
  json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
  table += '</tr>'
  json.table.rows.forEach(ligne => {
    // 初始化空值标记和行值数组
    var hasEmptyCell = false;
    var rowValues = [];
    ligne.c.forEach(cellule => {
        try{
          var valeur = cellule.f ? cellule.f : cellule.v;
          // 判断单元格是否为空值/Null/未定义
          if (valeur === null || valeur === '' || typeof valeur === 'undefined') {
            hasEmptyCell = true;
          }
          rowValues.push(valeur);
        } catch(e){
          // 捕获到异常说明单元格无效，标记为空
          hasEmptyCell = true;
          rowValues.push('');
        }
      }
    );
    // 仅渲染无空值的行
    if (!hasEmptyCell) {
      table += '<tr>';
      rowValues.forEach(valeur => {
        table += '<td>' + valeur + '</td>';
      });
      table += '</tr>';
    }
    }
  )
  table += '</table>'
  return table
}

关键修改说明 #

• 遍历每行时，先创建hasEmptyCell标记和rowValues数组（对应你说的C语言存数组校验的思路）
• 处理每个单元格时，判断值是否为null、空字符串或未定义，一旦发现就标记该行有问题
• 只有当整行无空值时，才把该行的HTML代码添加到表格中

这样就能自动过滤掉所有包含空值或Null的行，只保留完全非空的数据行。

内容的提问来源于stack exchange，提问作者RP_