显示和隐藏表格的链接
Links to show and hide tables
我试图通过点击它将显示和隐藏它下面的表链接,一旦我登陆页面,我想看到的都是链接。我尝试这个示例代码,但没有得到任何地方,有什么建议吗?
<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>
谢谢!
您只需将选择器更改为:
$(this).next('table').slideToggle("slow");
使用JQuery next()函数,你的代码将工作。
$('.act table').hide();
$('.see').click(function() {
$(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>
$('#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/
试试这个,运行代码片段
<!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>
相关文章:
- 在表格单元格中查找超链接
- 在表格最后一行(链接)中显示菜单,并在单击菜单项时显示模式窗口
- 显示表格数据的更多链接
- 创建到电子表格创建错误中的文件的链接的脚本“;无法转换“”;
- 点击带有CasperJS的表格中的链接
- 按钮对链接对输入类型=“;提交”;在表格上
- 使用jQuery在表格单元格中设置链接
- 如何使用JavaScript在HTML表格中获取td内部的链接文本
- 点击链接提交表格并发送到多个电子邮件 ID
- 如何在单击链接时制作可展开的表格
- 使用 Coffeescript 将表格行转换为 Rails 中的链接
- HtmlService表不支持电子表格中的换行符和超链接
- 带有链接未选中复选框的 HTML 表格行
- 显示和隐藏表格的链接
- 如何链接图表和表格?我的意思是在单击表格的行时,我必须能够突出显示折线图中的线
- 需要复制谷歌电子表格(自定义公式)和链接的谷歌表单
- 如何添加一个额外的超链接到Javascript表格链接
- 如何将链接页面显示为表格的内容
这就是我的例子 - 如何在将鼠标悬停在另一个链接上时更改表格背景图像
- 如何在单击链接时切换表格单元格的内容