如何開始崩潰擴展桌子行

我已經然而這是工作的擴張錶行有兩件事情我不確定的如何開始崩潰擴展桌子行

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<body> 

<table> 
    <tr class="parent" id="row123"> 
    <td>People</td> 
    <td>Click to Expand</td>   
    <td>N/A</td> 
    </tr> 
    <tr class="child-row123"> 
    <td>Eve</td> 
    <td>Jackson</td>   
    <td>94</td> 
    </tr> 
    <tr class="child-row123"> 
    <td>John</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
</table> 
<script> 
$(function() { 
    $('tr.parent') 
     .css("cursor","pointer") 
     .click(function(){ 
      $(this).siblings('.child-'+this.id).toggle(); 
     }); 
    $('tr[@class^=child-]').hide().children('td'); 
}); 
</script> 
</body> 
</html>

你如何保證你在一開始摺疊行
你怎麼執行slideToggle效果，當我嘗試使用這個我得到一些奇怪的結果。

感謝，

來源

2015-05-11 felix001

您可以添加的jsfiddle重現問題？ –

你可以改變你的選擇器：'tr [class^=「child - 」]' – melancia

-1

這

$('tr[@class^=child-]').hide().children('td');

也許應該是這樣的：

$('tr[class^=child-]').children('td').hide();

注意刪除@。

對於的slideToggle，使用DIV，而不是表的元素，這是出了名的麻煩在動畫：

<td><div>People</div></td> 

$('tr.parent') 
    .css("cursor", "pointer") 
    .click(function() { 
    $(this).siblings().find('td > div').slideToggle(); 
}); 

$('tr[class^=child-]').children('td').children('div').hide();

Demo

的選擇變得有點複雜，有多個子行：

$('tr.parent') 
    .css("cursor", "pointer") 
    .click(function() { 
     // slide up divs in all sibling rows 
     $(this).siblings('tr[class^=child-]').find('div').slideUp(); 

     // define children as all trailing, sequential rows with 'child-' class 
     var $children = $(this).nextUntil($('tr').not('[class^=child-]')); 

     // toggle those 
     $children.find('td > div').slideToggle(); 
}); 

// initially hide all child rows (could also be done with CSS) 
$('tr[class^=child-]').find('td > div').hide();

Demo 2

來源

2015-05-11 20:23:06 isherwood

我測試了這個，它的工作原理，但只有當你有一個單一的行。我更新了jsfiddle來顯示這個 - http://jsfiddle.net/0Lh5ozyb/2/ – felix001

回答更新。我會認真考慮一個標記更改將子行放入父行。將顯着簡化您的腳本，並可能使您的表更易於訪問。 – isherwood

謝謝。任何可能的機會都會解釋它是如何工作的，因爲我還需要在單擊輸入框時防止點擊。 – felix001

您可以在切換動作上添加效果，例如'慢'。

而對於在beggining崩潰，你可以選擇像TR的所有simblings：

$('tr.parent').siblings('[class^=child]').hide();

我做了一個工作示例：這裏的a jsfiddle link

來源

2015-05-11 20:30:03

$(function() { 
    $('tr[class^="child-"]').hide(); 
    $('tr.parent') 
     .css("cursor","pointer") 
     .click(function(){ 
      $('.child-'+$(this).attr("id"). slidetoggle(); 
     }); 
});

來源

2015-05-11 20:35:42

如何開始崩潰擴展桌子行

回答

相關問題