隐藏表格单元输出使用jQuery/Handlebars.js

缺失值我有以下方式表的设计：隐藏表格单元输出使用jQuery/Handlebars.js

<tr> 
    <th rowspan="6" scope="row">Payment History: <br><em>(Up to 25 months)</em></th> 
    <td colspan="3"> 
    <table id="paymentHistory" cellspacing="1" summary="Payment History" class="table table-sm table-bordered" > 
     <thead class="thead-default"> 
     <tr> 
      <th style="white-space: nowrap;"></th> 
      <th style="white-space: nowrap;">Jan</th> 
      <th style="white-space: nowrap;">Feb</th> 
      <th style="white-space: nowrap;">Mar</th> 
      <th style="white-space: nowrap;">Apr</th> 
      <th style="white-space: nowrap;">May</th> 
      <th style="white-space: nowrap;">Jun</th> 
      <th style="white-space: nowrap;">Jul</th> 
      <th style="white-space: nowrap;">Aug</th> 
      <th style="white-space: nowrap;">Sept</th> 
      <th style="white-space: nowrap;">Oct</th> 
      <th style="white-space: nowrap;">Nov</th> 
      <th style="white-space: nowrap;">Dec</th> 
     </tr> 
     {{#each PaymentProfile}} 
     <tr> 
      <th rowspan="2">{{@key}}</th> 
     </tr> 
     <!--<tr>--> 
     <!--{{#each this}}--> 

     <!--<th style="white-space: nowrap;">{{months @key}}</th>--> 
     <!--{{/each}}--> 
     <!--</tr>--> 
     <tr> 
      {{#each this}} 
      <td style="height: 42px;">{{hideEmptyData this}}</td> 
      {{/each}} 
     </tr> 
     {{/each}} 
     </thead> 
    </table> 
    </td> 
</tr>

我有一些细胞，其是空的某些行。我渲染的JSON有一些空的字段/元素，因此它们不会显示在表格中。我想隐藏那些空的单元。

我必须编写registerHelper或jquery函数吗？我会怎么做？

$("#paymentHistory > tbody > tr").each(function() { 
      console.log("inside table"); 
      $td=$(this).find('td'); 
      if($td.text() === ''){ 
       $(this).css("display", "none"); 
      } 
      // $(this).parent().hide(); 

     });

我想上面的代码。但我无法进入功能本身。我无法在控制台中打印“内部表格”。有人可以建议我我做错了什么？

所以我想要做的是隐藏表格单元格是空的。例如，在2014年，所有月份的元素都是空的，所以我不想显示2014年的行; 2015年仅显示JAN到AUG的元素，因为其他人是空的。

JSON数据如下：

"PaymentProfile":{ 
        "2015":{ 
         "1":"9", 
         "2":"-", 
         "3":"-", 
         "4":"-", 
         "5":"-", 
         "6":"9", 
         "7":"9", 
         "8":"B", 
         "9":" ", 
         "10":" ", 
         "11":" ", 
         "12":" " 
        }, 
        "2014":{ 
         "1":" ", 
         "2":" ", 
         "3":" ", 
         "4":" ", 
         "5":" ", 
         "6":" ", 
         "7":" ", 
         "8":" ", 
         "9":" ", 
         "10":" ", 
         "11":" ", 
         "12":" " 
        } 
        },

有人能帮助我吗？ Output of the above code

来源

2017-10-09 JSnewbie

'{{＃如果TD}}... {{/ if}个}' – awd

@awd事情是我不想因为所有的月份是空的，以显示整个2014行。那我该怎么做？ – JSnewbie

我认为这将有助于你提供数据的例子。 – 76484

使用以下代码解决了上述问题：希望它可以帮助某人。

$('#paymentHistory tbody tr').each(function(){      
         var tr = $(this);      
         var tdNumber = tr.find('td').length; 
         var counter = 0; 
         tr.find('td').each(function() {       
          if ($(this).text().trim() == '') counter++;      
         });      
         if (counter == tdNumber) tr.hide(); 
        });

来源

2017-10-11 16:24:51 JSnewbie

首先，不要在表格单元格中添加内联样式：height: 42px。 <td>默认没有高度，所以如果你没有内容，它会有height:0。现在，<tr>是相同的 - 默认情况下它的确有height: 0，并且它的子项获得height，这意味着如果没有，则由于默认的height属性，它将不可见。

看一下例子：

<table> 
 
    <thead> 
 
    <th>Row</th> 
 
    <th>C1</th> 
 
    <th>C2</th> 
 
    <th>C3</th> 
 
    <th>C4</th> 
 
    <th>C5</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1st row</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2nd row</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td>4th row</td> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

的第三排是那里的HTML代码，但它是默认情况下不可见的，因为它是空的。所以你所要做的就是去掉默认的内联样式来达到这个效果。如果你想添加的height: 42px的表格单元格，可以考虑使用CSS（但不是内联 - 使用文件的<head>或<link>它<style>标签从外部.css样式表）：

td:not(:empty) { 
    height: 42px; 
}

参考：:not， :empty

来源

2017-10-10 07:01:26 wscourge

这不起作用。此外，我的首要任务是不显示2014年的行，如果它是完全空的。我该如何解决？ – JSnewbie

td：空{height：42px;}工作。 – JSnewbie

通知第三排我的回答 - 这是完全空和它是不可见的 - 好像你想要什么。我不认为我理解你需要什么，因为设置'td：empty {height：42px; }似乎正在做相反的事情：它给42px高度的空元素。 – wscourge

隐藏表格单元输出使用jQuery/Handlebars.js

回答

相关问题