[英]showing/hiding table rows inside an HTML table
我已經使用HTML創建了一個基本表。 該表具有嵌套的元素,當您單擊每個分配的按鈕時,這些元素將單獨打開。 因此,當您單擊“ +”圖標時,它會打開一個子菜單,其中包含許多表格行,每個菜單行都有一個圖標“ pitch”,當單擊時會打開一個信息頁面。
目前發生的情況是,當我單擊“ +”時,它會顯示子菜單項,因此一切正常
當我單擊“音高”項目時,我希望發生三件事。 然后應隱藏顯示“音高”鏈接和其他信息的行。
顯示信息的行(HELLO)隨后應可見
單擊時,“-”按鈕應關閉信息(HELLO)部分,然后再次顯示“音高”行。
誰能告訴我如何修改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="pitcher" 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><a href="#">-</a></td>
<td>
<p>HELLO</p>
</td>
</tr>
<tr class="cat1" style="display:none">
<td><a href="#" class="pitcher" 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><a href="#">-</a></td>
<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="pitcher" 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><a href="#">-</a></td>
<td>
<p>HELLO</p>
</td>
</tr>
還附帶了此JSFiddle,因此希望您能明白我的意思。
任何幫助將不勝感激。
謝謝
這應該很容易,所以:
-將.hide()
添加到'pitch' <tr>
-添加一個類-
可以輕松地處理事件
-隱藏更多信息並再次顯示音高
$(".pitcher").click(function(e) {
e.preventDefault();
var className = 'cat'+$(this).attr('data-prod-cat');
$(this).closest('tr').next().toggle();
$(this).closest('tr').hide(); // add this to hide 'pitch' row
});
$('.x').click(function(e) { // link to show pitcher has class 'x'
e.preventDefault();
$(this).closest('tr').prev().toggle(); // show pitcher again
$(this).closest('tr').hide(); // hide '-' link
});
在小提琴中看到我已經將class=x
添加到-
鏈接(再次顯示投手)。
https://jsfiddle.net/w6dvyshj/13/ (僅第一個音調有效,只是這個音調具有class=x
)
我為“-”錨標記添加了一個類,並修改了javascript:
<table border=1>
<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="pitcher" 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><a href="#" class="hypen">-</a></td>
<td>
<p>HELLO</p>
</td>
</tr>
<tr class="cat1" style="display:none">
<td><a href="#" class="pitcher" 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 ><a href="#" class="hypen">-</a></td>
<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="pitcher" 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><a href="#" class="hypen">-</a></td>
<td>
<p>HELLO</p>
</td>
</tr>
</table>
$(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).parent().parent().toggle();
$(this).closest('tr').next().toggle();
});
$(".hypen").click(function(e){
e.preventDefault();
$(this).parent().parent().hide();
$(this).parent().parent().prev().show();
});
});
為“-”錨添加了onclick事件,為“ picher”添加了onclick事件,檢查是否有幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.