隱藏表格單元輸出使用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

回答

相關問題