javascript json 隐藏空行

Question

首先让我们说我认为自己非常擅长操纵已经存在的代码来满足我的需要，但无论如何都不擅长从头开始编写自己的代码。话虽如此，进入正题！

我正在使用 Google sheet 来维护与我相关的台球联赛的大量统计信息。

使用 Javascript/Jquery，我从 sheet 中提取数据，并且我可以根据自己的喜好对其进行格式化。但是，我运行遇到一个问题，因为代码循环遍历行以从 sheet 中提取项目并解析为 JSON，它正在为列获取空行比 sheet.

上最长的列短

这是我如何抓取数据并对其进行格式化的示例：

// make JSON call to Google Data API
$.getJSON(url, function(data) {

    // Build the Table Headings for Teams
    var tmname = '';

    tmname += '<table class="table table-sm mb-0 tablesorter stand1">';
    tmname += '<thead>';
    tmname += '<tr>';
    tmname += '<th style="width: 50%;">Team Name</th>';
    tmname += '<th style="width: 50%;" class="text-right">Total Points</th>';
    tmname += '</tr>';
    tmname += '</thead>';
    tmname += '<tbody class="stand1">';

    // Build the Table Rows for Sunday Juniors      

    var sjt8 = '';
    // loop to build html output for 8 Ball Format
    var entrysjt8 = data.feed.entry;
    for (var i = 0; i < entrysjt8.length; i++) {
        sjt8 += '<tr>';
        sjt8 += '<td class="score1">' + entrysjt8[i]['gsx$sjt8name']['$t'] + '</td>';
        sjt8 += '<td class="text-right score1">' + entrysjt8[i]['gsx$sjt8point']['$t'] + '</td>';
        sjt8 += '</tr>';
    }

    var sjtlo = '';
    // loop to build html output for Laggers Option Format
    var entrysjtlo = data.feed.entry;
    for (var i1 = 0; i1 < entrysjtlo.length; i1++) {
        sjtlo += '<tr>';
        sjtlo += '<td>' + entrysjtlo[i1]['gsx$sjtloname']['$t'] + '</td>';
        sjtlo += '<td class="text-right">' + entrysjtlo[i1]['gsx$sjtlopoint']['$t'] + '</td>';
        sjtlo += '</tr>';
    }

    // Close the Tables
    var tbclose = '';
    tbclose += '</tbody>';
    tbclose += '</table>';

    // output html - Sunday Juniors     
    $('.sjt8').html(tmname + sjt8 + tbclose);
    $('.sjtlo').html(tmname + sjtlo + tbclose);
});

一旦数据被抓取，我只是将它注入一个页面，并通过 div 调用定义的 class.

我尝试实施的一个解决方法是使用 jquery 函数来隐藏空行，并试图在文档加载后触发它。那只适用于刷新。它在第一页加载时不起作用。然后我在页面上添加了 500 毫秒的超时，它有点管用。用户看到它确实起作用时会发生什么，但似乎大约十分之一的加载事件不会触发。这是相关代码：

console.log('Outside document ready handler ' + $('.test').length)
$(document).ready(function() {
    setTimeout(function() {
        $('table tbody.stand1 tr').filter(
            function(){
                return $(this).find('td').length == $(this).find('td:empty').length;
                }).hide();
    }, 500);
});

我一直在尝试找到更好的解决方案，我在想是否有办法检查 JSON 字段的长度，如果为 null 或 ="" 则追加一个 class 然后我可以设置样式来隐藏，或者直接附加 style="display: none;"。到目前为止，我还没有在搜索中偶然发现类似的东西。

我也对其他想法持开放态度。

如果您想查看我使用这些数据的目的以及它的广泛性，这是所有排名都被拉入的页面： https://www.westmibcapl.com/leagues/standings/

Answer 1

这是一个示例解决方案https://jsfiddle.net/v7fkj7et/

$('table tr').each(function(){
  var empty = true;
  $(this).find('td').each(function(){
    if($(this).text() != '')
      empty = false;
  });
  
  if(empty)
    $(this).hide();
});

td {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td></td>
    <td>2</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>  
  <tr>
    <td></td>
    <td></td>
    <td>1</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>1</td>
    <td></td>
    <td></td>
  </tr>
</table>

解法说明

遍历所有 tr 并设置一个值为 true
然后遍历每个 td within each tr
如果有 td contains value 则将变量值更改为 false
检查 variable value with the tr loop 并根据值隐藏 tr （如果值为 true，则表示所有 td 都是空的）

备选方案

在附加行之前检查值。

var sjt8 = '';
// loop to build html output for 8 Ball Format
var entrysjt8 = data.feed.entry;
for (var i = 0; i < entrysjt8.length; i++) {
  if( entrysjt8[i]['gsx$sjt8name']['$t'] != '' && entrysjt8[i]['gsx$sjt8point']['$t'] != '') {
    sjt8 += '<tr>';
    sjt8 += '<td class="score1">' + entrysjt8[i]['gsx$sjt8name']['$t'] + '</td>';
    sjt8 += '<td class="text-right score1">' + entrysjt8[i]['gsx$sjt8point']['$t'] + '</td>';
    sjt8 += '</tr>';
  }
}

希望对您有所帮助。

javascript json 隐藏空行

javascript json hide empty rows

javascript

jquery

json

google-sheets-api