如何動態地隱藏表格tr元素？

Question

如何判斷表的內容是否正在調整表的大小？即如果表格的行填充表格，但不展開它，我想顯示元素，否則，我想顯示一個VIEW按鈕。

下面是表：

<table class="cal_Day_Event"> 
    <tr> 
     <td class="cal_Day_Event_Phone_Icon"> 
      <img src="Images\PhoneComm.png" alt="phone"/> 
     </td> 
     <td class="cal_Day_Event_Phone_Desc"> 
      <a href="http://www.google.com">Call James</a> 
     </td> 
    </tr> 
    <tr> 
     <td class="cal_Day_Event_Meeting_Icon"> 
      <img src="Images\Meeting.png" alt="phone"/> 
     </td> 
     <td class="cal_Day_Event_Meeting_Desc"> 
      <a href="http://www.google.com">Meet Peter</a> 
     </td> 
    </tr> 
</table> 

行元素將被動態地添加。因此，可能有0到20個項目，用戶瀏覽器大小將決定在元素需要隱藏之前，表格可以增長多少。

我該怎麼做？我假設使用JavaScript或jQuery，然後處理表格大小調整事件？

編輯：認爲谷歌日曆。

Answer 1

好的伴侶，如果您的問題得到了解決，您希望表格的最大寬度爲瀏覽器寬度，並且如果表格行比您希望用「VIEW」 。

我打了一段時間，這就是我想出了：

你的表：（增加了一些測試數據）

<table class="cal_Day_Event"> 
      <tr> 
       <td class="cal_Day_Event_Phone_Icon"> 
        <img src="http://upload.wikimedia.org/wikipedia/commons/8/89/Large_Stratocumulus.JPG" /> 
       </td> 
       <td class="cal_Day_Event_Phone_Desc"> 
        <a href="http://www.google.com">Call James</a> 
       </td> 
      </tr> 
      <tr> 
       <td class="cal_Day_Event_Meeting_Icon"> 
        <p> 
        TEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEESSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSTIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIINNNNNNNNNNNNNNNG! 
        </p> 
       </td> 
       <td class="cal_Day_Event_Meeting_Desc"> 
        <a href="http://www.google.com">Meet Perewrewrter</a> 
       </td> 
      </tr> 
    </table> 

jQuery的（不是很在解釋好但IL試）：

$(function() { 
    /* Il hide the whole table by default 
     to get rid of the blink effect 
     (try the script whitout this part and you will understand) */ 

    $("table[class='cal_Day_Event']").hide(); 
}); 

$(window).load(function() { 

    /* Large Images loads after domready. This will make 
     it difficault to get the width of the image before 
     its loaded. Therefore ill use $(window).load() this 
     will execute my script after the whole page and its 
     contents has been loaded */ 

    $("table[class='cal_Day_Event']").show(); /* shows the table after everything is loaded */     
    var win_width = parseInt($(window).width()); /* get browser width (INT) */ 

    $.each($("table[class='cal_Day_Event'] tr td"),function(i,e){ /* For each TD in table */ 
    var e_next_obj = $(e).children().eq(0); /* Grab object in TD */ 
    var e_width = parseInt(e_next_obj.width()); /* Grab width of object in TD (INT) */ 
     if(e_width > win_width) /* If obj widht is bigger than browser width */ 
     { 
     /* if true then: creates a button with an onclick event 
       Replace original object */ 
     var bttn_view = $('<input type="button">'); 
      bttn_view.attr('value','View'); 
      bttn_view.click(function(){ 
      /*do whatever on bttn "view" click */      
      if(confirm('the content is bigger than your browser width load. \n want to see it anyway?')) 
      { 
       $(e).html(e_next_obj) 
      } 
      }); 
     $(e).html(bttn_view)  
      } 
    }); 
}) ; 

看到它在這裏的行動：http://jsfiddle.net/4XV9q/1/

希望它不會遠離你以後的樣子。

乾杯