[英]Hide and Show table inside a another table row
我有動態生成的表:
表格.ejs
<table>
<% for(var d=0;d<docs.length;d++)
{ %>
<tr>
<td>
<img src="http://www.bls.gov/images/icons/icon_small_plus.gif" class="image1"
id="image1" onclick=diffImage(this) />
</td>
<td>
<p><%= docs[d].name %></p></a>
</td>
<td>
<%= docs[d].url_Address %>
</td>
<td>
<%= docs[d].product_Name %></p></a>
</td>
</tr>
<div id= "sub" class="sub">
<tr class="sub" id="<%= docs[d]._id %>" >
<table style="width:100%;font-size: 14px;" align="right" bgcolor="#A0A0A3" >
<% for(var e=0;e<doc.length;e++)
{ %>
<tr>
<td>
<a href=<%= doc[e].url_Address %>><p><%= doc[e].product_Name %></p></a>
</td>
<td>
<p class = "tab"><%= doc[e].vendor_Name %></p>
</td>
</tr>
<% } %>
</table>
</tr>
</div>
<% } %>
</table>
現在我想要當我點擊圖像時圖像會改變並且div應該隱藏
我嘗試遵循 jquery 。
<script>
function diffImage(img) {
if(img.src.match("http://olenka.med.virginia")){
img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
$(".image1").click(function(){
$(".sub").hide();
});
}else{
$(".image1").click(function(){
$(".sub").show();
});
img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
}
}
</script>
它在單擊圖像時隱藏 div。
但問題是:
當我單擊圖像以顯示子表時,它顯示了每一行的所有子表,在嘗試隱藏行時也是如此?
我想要當點擊圖像時只有它的子表被隱藏或不顯示所有子表?
嘗試這個:
<script>
function diffImage(img) {
if(img.src.match("http://olenka.med.virginia")){
img.src = "http://www.bls.gov/images/icons/icon_small_plus.gif";
$(".image1").click(function(){
$(this).closest('tr').next('.sub').hide();
});
}else{
$(".image1").click(function(){
$(this).closest('tr').next('.sub').show();
});
img.src = "http://olenka.med.virginia.edu/psi/images/icons/minus_icon.png";
}
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.