在 HTML table 中切换 table 行
Toggling table rows inside an HTML table
我使用 HTML 创建了一个基本的 table。此 table 具有嵌套元素,当您单击每个分配的切换按钮时,这些元素应该会单独打开。因此,当您单击“+”图标时,它会打开一个子菜单,其中包含许多 table 行,其中每一行都有一个图标 'pitch',单击该图标将打开一个信息页面。
目前发生的情况是,当我点击“+”时,它只显示第一个子菜单项,而不是第二个。
我想要发生的是,当我单击“+”图标时,它会打开 ALL 里面的子菜单项,从这里我可以通过单击对应'pitch'图标。
任何人都可以告诉我如何修改 Javascript/HTML 来实现这一点吗?
我附上了下面的代码...
<table>
<tr>
<td></td>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
</tr>
<tr>
<td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
<td>Company</td>
<td>47</td>
<td>123</td>
<td>22/10</td>
<td>***</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="cat1" style="display:none">
<td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td>
<td>List</td>
<td>120</td>
<td>105</td>
<td>22/10</td>
<td>***</td>
<td>23/6/2015</td>
<td>14.95%</td>
<td>30%</td>
</tr>
<tr class="cat1" style="display:none">
<td>
<p>HELLO</p>
</td>
</tr>
<tr class="cat1" style="display:none">
<td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td>
<td>List</td>
<td>120</td>
<td>105</td>
<td>22/10</td>
<td>***</td>
<td>23/6/2015</td>
<td>14.95%</td>
<td>30%</td>
</tr>
<tr class="cat1" style="display:none">
<td>
<p>HELLO</p>
</td>
</tr>
<tr>
<td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
<td>Company</td>
<td>48</td>
<td>156</td>
<td>22/10</td>
<td>***</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="cat1" style="display:none">
<td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td>
<td>List</td>
<td>156</td>
<td>256</td>
<td>22/10</td>
<td>***</td>
<td>23/6/2015</td>
<td>16.95%</td>
<td>30%</td>
</tr>
<tr class="cat1" style="display:none">
<td>
<p>HELLO</p>
</td>
</tr>
另外我附上了一个JSFiddle所以你可以明白我的意思
任何帮助将不胜感激,我已经为这个问题苦苦挣扎了一段时间。
非常感谢
您需要使用 nextAll 方法而不是 next:
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$(this).closest('tr').nextAll('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
试试这个
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$(this).toggleClass("expand");
var className = 'cat'+$(this).attr('data-prod-cat');
var $current= $(this).closest('tr').next();
while($current.hasClass(className)){
if($(this).hasClass("expand")){
$current.show();
$current = $current.next().next();
}
else{
$current.hide();
$current = $current.next();
}
}
});
$(".pitcher").click(function(e){
e.preventDefault();
var className = 'cat'+$(this).attr('data-prod-cat');
$(this).closest('tr').next().toggle();
});
});
JS Fiddle : https://jsfiddle.net/w6dvyshj/8/
我使用 HTML 创建了一个基本的 table。此 table 具有嵌套元素,当您单击每个分配的切换按钮时,这些元素应该会单独打开。因此,当您单击“+”图标时,它会打开一个子菜单,其中包含许多 table 行,其中每一行都有一个图标 'pitch',单击该图标将打开一个信息页面。
目前发生的情况是,当我点击“+”时,它只显示第一个子菜单项,而不是第二个。
我想要发生的是,当我单击“+”图标时,它会打开 ALL 里面的子菜单项,从这里我可以通过单击对应'pitch'图标。
任何人都可以告诉我如何修改 Javascript/HTML 来实现这一点吗?
我附上了下面的代码...
<table>
<tr>
<td></td>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
<td>Column 4</td>
<td>Column 5</td>
<td>Column 6</td>
<td>Column 7</td>
</tr>
<tr>
<td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
<td>Company</td>
<td>47</td>
<td>123</td>
<td>22/10</td>
<td>***</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="cat1" style="display:none">
<td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td>
<td>List</td>
<td>120</td>
<td>105</td>
<td>22/10</td>
<td>***</td>
<td>23/6/2015</td>
<td>14.95%</td>
<td>30%</td>
</tr>
<tr class="cat1" style="display:none">
<td>
<p>HELLO</p>
</td>
</tr>
<tr class="cat1" style="display:none">
<td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td>
<td>List</td>
<td>120</td>
<td>105</td>
<td>22/10</td>
<td>***</td>
<td>23/6/2015</td>
<td>14.95%</td>
<td>30%</td>
</tr>
<tr class="cat1" style="display:none">
<td>
<p>HELLO</p>
</td>
</tr>
<tr>
<td><a href="#" class="toggler" data-prod-cat="1">+ </a></td>
<td>Company</td>
<td>48</td>
<td>156</td>
<td>22/10</td>
<td>***</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="cat1" style="display:none">
<td><a href="#" class="toggler" data-prod-cat="1">pitch </a></td>
<td>List</td>
<td>156</td>
<td>256</td>
<td>22/10</td>
<td>***</td>
<td>23/6/2015</td>
<td>16.95%</td>
<td>30%</td>
</tr>
<tr class="cat1" style="display:none">
<td>
<p>HELLO</p>
</td>
</tr>
另外我附上了一个JSFiddle所以你可以明白我的意思
任何帮助将不胜感激,我已经为这个问题苦苦挣扎了一段时间。
非常感谢
您需要使用 nextAll 方法而不是 next:
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$(this).closest('tr').nextAll('.cat'+$(this).attr('data-prod-cat')).toggle();
});
});
试试这个
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$(this).toggleClass("expand");
var className = 'cat'+$(this).attr('data-prod-cat');
var $current= $(this).closest('tr').next();
while($current.hasClass(className)){
if($(this).hasClass("expand")){
$current.show();
$current = $current.next().next();
}
else{
$current.hide();
$current = $current.next();
}
}
});
$(".pitcher").click(function(e){
e.preventDefault();
var className = 'cat'+$(this).attr('data-prod-cat');
$(this).closest('tr').next().toggle();
});
});
JS Fiddle : https://jsfiddle.net/w6dvyshj/8/