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，然后处理表调整大小事件？

编辑：想想Google日历。

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/

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

干杯

如何动态隐藏表tr元素？

1 个答案: