显示和隐藏表格的链接

我想要链接，点击它会显示并隐藏下面的表格，一旦我登陆页面，所有我想看到的都是链接。我试着用这个示例代码，但没有得到任何地方，有什么建议吗？显示和隐藏表格的链接

<html> 
<title>hise show</title> 
<head> 
<script>jquery link here</script> 

<script type="text/javascript"> 

$(document).ready(function() { 
$('.act table').hide(); 
$('.see').click(function() { 
$(this).parents('table').find('td').slideToggle("slow"); 
}); 

}); 

</script> 

</head> 
<body> 

<br> 
<p class="see" style="font-size:15px;">Table 1</p> 

<table class="act" border="0" cellpadding="0" cellspacing="1"> 
<thead> 
<tr> 
<th class="1">AA</th> 
<th class="1">AA</th> 
</tr> 
</thead> 
<tr> 
<td class="1">A</td> 
<td class="1">A</td> 
</tr> 
</table> 
<br> 

<br> 
<p class="see" style="font-size:15px;">Table 2</p> 

<table class="act" border="0" cellpadding="0" cellspacing="1"> 
<thead> 
<tr> 
<th class="2">BB</th> 
<th class="2">BB</th> 
</tr> 
</thead> 
<tr> 
<td class="2">BB</td> 
<td class="2">BB</td> 
</tr> 
</table> 
<br> 

<br> 
<p class="see" style="font-size:15px;">Table 3</p> 

<table class="act" border="0" cellpadding="0" cellspacing="1"> 
<thead> 
<tr> 
<th class="3">CC</th> 
<th class="3">CC</th> 
</tr> 
</thead> 
<tr> 
<td class="3">CC</td> 
<td class="3">CC</td> 
</tr> 
</table> 
<br> 

</body> 
</html>

谢谢！

来源

2015-10-08 Andre

我不认为'$（本）.parents'是不会帮你，当你想要隐藏表格元素是不下一个兄弟姐妹。检查JavaScript'nextElementSibling'。看看JQuery下一个'$（“li.third-item”）.next（）。css（“background-color”，“red”）;' – www139

你刚才您选择更改为：

$(this).next('table').slideToggle("slow");

使用jQuery next()功能时，您的代码将工作。

$('.act table').hide(); 
 

 
$('.see').click(function() { 
 
\t $(this).next('table').slideToggle("slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br> 
 
<p class="see" style="font-size:15px;">Table 1</p> 
 

 
<table class="act" border="0" cellpadding="0" cellspacing="1"> 
 
<thead> 
 
<tr> 
 
<th class="1">AA</th> 
 
<th class="1">AA</th> 
 
</tr> 
 
</thead> 
 
<tr> 
 
<td class="1">A</td> 
 
<td class="1">A</td> 
 
</tr> 
 
</table> 
 
<br> 
 

 
<br> 
 
<p class="see" style="font-size:15px;">Table 2</p> 
 

 
<table class="act" border="0" cellpadding="0" cellspacing="1"> 
 
<thead> 
 
<tr> 
 
<th class="2">BB</th> 
 
<th class="2">BB</th> 
 
</tr> 
 
</thead> 
 
<tr> 
 
<td class="2">BB</td> 
 
<td class="2">BB</td> 
 
</tr> 
 
</table> 
 
<br> 
 

 
<br> 
 
<p class="see" style="font-size:15px;">Table 3</p> 
 

 
<table class="act" border="0" cellpadding="0" cellspacing="1"> 
 
<thead> 
 
<tr> 
 
<th class="3">CC</th> 
 
<th class="3">CC</th> 
 
</tr> 
 
</thead> 
 
<tr> 
 
<td class="3">CC</td> 
 
<td class="3">CC</td> 
 
</tr> 
 
</table> 
 
<br>

来源

2015-10-08 14:42:19

$('#showTable').click(function(){ 
 
    $('#mytable').toggleClass('hidden'); 
 
    if($('#showTable').text()=='Show Table') $('#showTable').text('Hide Table'); 
 
    else $('#showTable').text('Show Table'); 
 
});

table tr td{ border: 1px solid #383838; } 
 
table { border: 1px solid #383838; } 
 
.hidden{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<a href="#" id="showTable">Show Table</a> 
 

 
<table class="hidden" id="mytable"> 
 
    <tr> 
 
     <td> 
 
      Sample Table 
 
     </td> 
 
     <td> 
 
      Sample Table 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      Sample Table 
 
     </td> 
 
     <td> 
 
      Sample Table 
 
     </td> 
 
    </tr> 
 
</table>

为你的方法另一种快速的解决办法：检查这code：http://jsfiddle.net/vxt5h9o7/

来源

2015-10-08 14:48:06 user1012181

试试这个，运行段


 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>The code</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   
 
    <body> 
 
<br> 
 
<p class="see" style="font-size:15px;">Table 1</p> 
 

 
<table class="act" border="0" cellpadding="0" cellspacing="1"> 
 
<thead> 
 
<tr> 
 
<th class="1">AA</th> 
 
<th class="1">AA</th> 
 
</tr> 
 
</thead> 
 
<tr> 
 
<td class="1">A</td> 
 
<td class="1">A</td> 
 
</tr> 
 
</table> 
 
<br> 
 

 
<br> 
 
<p class="see" style="font-size:15px;">Table 2</p> 
 

 
<table class="act" border="0" cellpadding="0" cellspacing="1"> 
 
<thead> 
 
<tr> 
 
<th class="2">BB</th> 
 
<th class="2">BB</th> 
 
</tr> 
 
</thead> 
 
<tr> 
 
<td class="2">BB</td> 
 
<td class="2">BB</td> 
 
</tr> 
 
</table> 
 
<br> 
 

 
<br> 
 
<p class="see" style="font-size:15px;">Table 3</p> 
 

 
<table class="act" border="0" cellpadding="0" cellspacing="1"> 
 
<thead> 
 
<tr> 
 
<th class="3">CC</th> 
 
<th class="3">CC</th> 
 
</tr> 
 
</thead> 
 
<tr> 
 
<td class="3">CC</td> 
 
<td class="3">CC</td> 
 
</tr> 
 
</table> 
 
<br> 
 
    
 
<script> 
 
$(document).ready(function(){ 
 
    $(".act").hide(); 
 
    $(".see").click(function(){ 
 
     $(this).next().toggle(); 
 
    }); 
 
}); 
 
</script> 
 
    </body> 
 
</html>

来源

2015-10-08 14:54:26 Aroniaina

这是一种添加加号和减号以指示这些表可以崩溃？ – Andre

我想这样，但是，没有任何显示： $（文件）。就绪（函数（）{ $（）隐藏（）; $ （）点击（函数 “行事。 ”“ 看。” （）{ $（this）.next（）。slideToggle（）; }）。toggle（function（）{（this）.children（“span”）.text（“[ - ]”）; }，function（）{ $（this）.children（“span”）.text（“[+]”）; }）; }）; – Andre

显示和隐藏表格的链接

回答

相关问题