table row collapse/expand

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

Март 4, 2010, 5: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 Группа: в ухо

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

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

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

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

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

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

Trej Gun

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

Март 5, 2010, 1: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>

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

table row collapse/expand

Войти