HTML jQuery可折叠表格

Question

I've been working on this for a bit and I cant quite make this behave the way I want it.

Basically What I need is a way to keep all "text" cells the same size on page load and if they have more text then can fit in the cell add an ellipse (...). Then when you click on the cells that have the ellispe they will expand allowing you to read the entire text rather then the portion showing.

Here is a jsfiddle that I did that shows the problem: http://jsfiddle.net/7ugmx/1/

<table class="table" style="margin:0;">
    <tr>
        <th width="10%" style="border-top:0;">Id</th>
        <th style="border-top:0;">Text</th>
        <th width="10%" style="border-top:0;">Data</th>
    </tr>
</table>
<div class="data">
    <table class="table table-striped">
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updatestesting updatestesting updatestesting updatestesting updates /* SNIP */</td>
            <td width="10%">2014-02-02 18:01:14</td>
        </tr>
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updates</td>
            <td width="10%">2014-02-02 18:01:13</td>
        </tr>
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updates</td>
            <td width="10%">2014-02-02 18:01:13</td>
        </tr>
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updates</td>
            <td width="10%">2014-02-02 18:01:13</td>
        </tr>
        <tr>
            <td width="10%">12.1.124.144</td>
            <td class="slide">testing updates</td>
            <td width="10%">2014-02-02 18:01:13</td>
        </tr>
    /* SNIP */

    </table>
</div>

Here is the jquery script I created.

  $(".slide").click(function () {
      $(this).slideToggle(200);
  });

As you can see on jsfiddle, the entire text cell starts out normal sized, and when clicked, vanishes all together.

Is it possible to have the cell start minimized showing 1 line of text, and then maximize showing its entirety on click?

Thanks for any help.

Answer 1

Its possible, here is one resolution:

/* CSS */
.slide {
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}
/* JS */
      $(".slide").click(function () {
          $(this).toggleClass('slide');
      });

And working example : JSFIDDLE

[EDIT]

Here is a example with wrapped cells and fixed div width as described in comment : SECOND EXAMPLE

Answer 2

I'm throwing this out just as an idea/thought. FIDDLE

Instead of a slider, I use a jQuery dialog as a popup that opens with the contexts of the td/div that is clicked on. On mouseout, it closes.

JS

var popupdialog = $('#popupdialog').dialog({
    autoOpen: false,
    width: 'auto',
    height: 'auto',
    position: {my: 'top right',
               at: 'middle left',
               of: '.hidden'}
                                  });
$('.table td div').click(function(){
       popupdialog.dialog('open');
       var cloneme = $(this).clone();
       $('#popupdialog').html(cloneme);

});
$('.table td div').mouseout(function(){
       $(this).css('background-color', 'transparent');
       popupdialog.dialog('close');

});