jquery - 如何动态隐藏表格 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(不太擅长解释，但我会尝试):

 $(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/

希望它离你所追求的不远。

干杯