ФорумПрограммированиеJavaScript → table row collapse/expand

table row collapse/expand

  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо

    Spritz 4 марта 2010 г. 17:27

    задача такая
    есть таблица из 2 рядков
    певый видимый второй скрытый
    способ сокрытия любой - либо display:none на tr либо на td либо еще как
    при нажатии на первый рядок второй становиться видимым
    при этом должна происходить плавная анимация увеличивающая размер рядка от 0 до полной высоты
    строки могут иметь тэг colspan
    должно быть кросбраузерно
    изменять разметку можно как угодно

    я уже знаю
    что у рядка оригинальный display не block a table-row, у клетки table-cell
    что эксплорер клал на предыдущее высказывание
    что для того чтобы table-row и table-cell работали с жуквери я написал патч

    jQuery.fx.prototype.update = function(){
    if ( this.options.step )
    this.options.step.call( this.elem, this.now, this );

    (jQuery.fx.step[this.prop] || jQuery.fx.step._default)( this );

    var old = jQuery.data(this.elem, "olddisplay");
    if ( ( this.prop == "height" || this.prop == "width" ) && this.elem.style )
    this.elem.style.display = old || "block";
    }


    $("td").each(function(){
    $.data(this, "olddisplay", "table-cell")
    });
    $("tr").each(function(){
    $.data(this, "olddisplay", "table-row")
    });


    что это всравно не помогает для того чтобы slide эффект работал правильно
    какие есть предложения?

    последняя идея более мени работоспособного кода (в FF)


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Michelin</title>

    <style>
    #myTbl{
    border-collapse:collapse;
    border: 1px solid red;
    }

    #myTbl tr {
    border-top : 1px solid red;
    }

    .hidden {
    border-top : none !important;
    }

    .hidden td{
    display:none;
    }

    .hidden td div{
    display:none;
    }
    </style>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){

    $("#myTbl tr").each(function(){
    $(this).find("td:first").toggle(
    function(){
    $(this).parent().next().find("td").show(0, function(){
    $(this).find("div").slideDown(1000);
    })
    },
    function(){
    $(this).parent().next().find("div").slideUp(1000,function(){
    $(this).parent().hide(0);
    })
    }
    );
    });


    });

    </script>



    </head>
    <body>

    <table id="myTbl" cellspacing="0" cellpadding="0" border="0">
    <col style="width:40px;"/>
    <col/>
    <tbody>
    <tr>
    <td>row 1</td>
    <td>data 1.2</td>
    <td>data 1.3</td>
    </tr>
    <tr class="hidden">
    <td><div>12 345 678 890</div></td>
    <td colspan="2"><div>long long string 1</div></td>
    </tr>
    </tbody>
    </table>



    </body>
    </html>
  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо

    Spritz 4 марта 2010 г. 20:17, спустя 2 часа 50 минут 34 секунды

    кстати уже не актуально


    блго на пiха.ру
  • andrrr

    Сообщения: 12 Репутация: N Группа: Кто попало

    Spritz 4 марта 2010 г. 20:23, спустя 5 минут 41 секунду

    Нашел решение?
    Или на дивах переверстал?)
  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо

    Spritz 5 марта 2010 г. 13:25, спустя 17 часов 1 минуту 54 секунды

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Michelin</title>

    <style>
    #myTbl{
    border-collapse:collapse;
    border: 1px solid red;
    width:100%;
    zoom:0;
    }

    #myTbl tr {
    border-top : 1px solid red;
    }

    .hidden {
    border-top : none !important;
    }

    .hidden td{
    display:none;
    }

    .hidden td div{
    display:none;
    }

    </style>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
    $("#myTbl tr").each(function(){
    $(this).find("td:first").toggle(
    function(){
    var self = $(this)
    self.parent().next().find("td").show();
    self.parent().next().find("div").each(function(i,e){
    var col = $("#myTbl col").eq(i),
    width = parseInt(col.css("width"))*col.attr("span");
    // тут еще надо расчитать border для col если есть
    $(this).width(width-1)
    }).slideDown(1000);
    },
    function(){
    $(this).parent().next().find("div").slideUp(1000,function(){
    $(this).parent().hide(0);
    })
    }
    );
    });
    });

    </script>



    </head>
    <body>
    <div style="width:500px;">
    <table id="myTbl" cellspacing="0" cellpadding="0" border="0">
    <col style="width:33%;"></col>
    <col style="width:33%;" span="2"></col>
    <tbody>
    <tr>
    <td>row 1</td>
    <td>data 1.2</td>
    <td>data 1.3</td>
    </tr>
    <tr class="hidden">
    <td><div>12 345 678 890</div></td>
    <td colspan="2"><div>long long long long long string 1</div></td>
    </tr>
    <tr>
    <td>row 2</td>
    <td>data 2.2</td>
    <td>data 2.3</td>
    </tr>
    <tr class="hidden">
    <td>12345</td>
    <td colspan="2">long long string 1</td>
    </tr>
    <tr>
    <td>row 3</td>
    <td>data 3.2</td>
    <td>data 3.3</td>
    </tr>
    <tr class="hidden">
    <td>12345</td>
    <td colspan="2">long long string 1</td>
    </tr>
    </tbody>
    </table>
    </div>


    </body>
    </html>

Пожалуйста, авторизуйтесь, чтобы написать комментарий!