admin管理员组文章数量:1317369
I'm trying to use jQuery to achieve the following.
When a table row is clicked, the info div within the table row is displayed, and if another table row is clicked, any other info element that is currently displayed will be hidden, and the new info div will be displayed according to the table row that has been clicked.
This problem is, the code isn't working correctly. I've played around with several alternatives but I can't seem to achieve the desired results.
This is going to be part of a contacts page, the table will show a list of contacts, and when a contact is clicked, you can see more data about that specific contact.
PLEASE NOTE: Using a table is not important, it can be a ul, ol, div.. anything.
$(document).ready(function() {
$(function() {
$("tr").click(function() {
if ($(this).find("> .info").css('display') == 'none') {
$(this).find("> .info").show();
} else {
$(this).find("> .info").hide();
}
});
});
});
.info {
display: none;
}
<script src=".1.1/jquery.min.js"></script>
<table>
<tr>
<td>Joe Bloggs</td>
<td>[email protected]</td>
<div class="info">555.555.555</div>
</tr>
<tr>
<td>Sam Doe</td>
<td>[email protected]</td>
<div class="info">556.556.556</div>
</tr>
</table>
I'm trying to use jQuery to achieve the following.
When a table row is clicked, the info div within the table row is displayed, and if another table row is clicked, any other info element that is currently displayed will be hidden, and the new info div will be displayed according to the table row that has been clicked.
This problem is, the code isn't working correctly. I've played around with several alternatives but I can't seem to achieve the desired results.
This is going to be part of a contacts page, the table will show a list of contacts, and when a contact is clicked, you can see more data about that specific contact.
PLEASE NOTE: Using a table is not important, it can be a ul, ol, div.. anything.
$(document).ready(function() {
$(function() {
$("tr").click(function() {
if ($(this).find("> .info").css('display') == 'none') {
$(this).find("> .info").show();
} else {
$(this).find("> .info").hide();
}
});
});
});
.info {
display: none;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Joe Bloggs</td>
<td>[email protected]</td>
<div class="info">555.555.555</div>
</tr>
<tr>
<td>Sam Doe</td>
<td>[email protected]</td>
<div class="info">556.556.556</div>
</tr>
</table>
Share
Improve this question
edited Jul 21, 2017 at 12:14
Jake Duncan
asked Jul 21, 2017 at 10:35
Jake DuncanJake Duncan
711 silver badge8 bronze badges
3
- whats exactly your question/or where you are stuck? I could'nt understand your problem exactly – Nagaraju Commented Jul 21, 2017 at 10:37
- Your html code is not value, please take your time and fix it, you have 1 tr and 2 /tr – Carsten Løvbo Andersen Commented Jul 21, 2017 at 10:38
-
1
You have a missing
<tr>
tag just before the<td>
of Sam Doe – NewToJS Commented Jul 21, 2017 at 10:39
6 Answers
Reset to default 1After adding the missing <tr>
to your table, try use .is(":visible")
to check if the element is vision
You also dont need to use >
in .find("> .info")
Example below.
$(document).ready(function() {
$(function() {
$("tr").click(function() {
if (!$(this).find(".info").is(":visible")) {
$(this).find(".info").show();
} else {
$(this).find(".info").hide();
}
});
});
});
.info {
display: none;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Joe Bloggs</td>
<td>[email protected]</td>
<td>
<div class="info">555.555.555</div>
</td>
</tr>
<tr>
<td>Sam Doe</td>
<td>[email protected]</td>
<td>
<div class="info">556.556.556</div>
</td>
</tr>
</table>
You can not use div directly, but you can achive same thing using this.
$(document).ready(function(){
$(function() {
$("tr").click(function() {
$('tr.visible').removeClass('visible').addClass('info'); $(this).next('tr').addClass('visible').removeClass('info');
});
});
});
.info {
display: none;
}
.visible {
display: inline-block;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td>Joe Bloggs</td>
<td>[email protected]</td>
</tr>
<tr class="info"><td colspan="2"><div>555.555.555</div></td></tr>
<tr>
<td>Sam Doe</td>
<td>[email protected]</td>
<div class="info">556.556.556</div>
</tr>
<tr class="info"><td colspan="2"><div>556.556.556</div></td></tr>
</table>
First of all you miss <tr>
in your code.
div
element will not use directly as a child oftr
Have to add
div
intd
EDIT
- Now here you can use
addClass
fortr
child div
element andremoveClass
tr
siblingschild div
Here is working snippet you can check this.
$(document).ready(function(){
$("tr").click(function() {
$(this).find("div[class*='info']").addClass('show');
$(this).siblings().find("div[class*='info']").removeClass('show');
});
});
.info {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Joe Bloggs</td>
<td>[email protected]</td>
<td><div class="info">555.555.555</div></td>
</tr>
<tr>
<td>Sam Doe</td>
<td>[email protected]</td>
<td><div class="info">556.556.556</div></td>
</tr>
</table>
You can use this way to achieve your purpose:-
$(document).ready(function() {
$('tr').click(function() {
$(this).next('.more-info').slideToggle('slow');
});
});
table {
border: solid 1px #000;
border-collapse: collapse;
width: 100%;
}
table th,
table td {
border: solid 1px #000;
}
.more-info {
display: none;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>thead</th>
<th>thead</th>
<th>thead</th>
</tr>
</thead>
<tbody>
<tr>
<td>column</td>
<td>column</td>
<td>column</td>
</tr>
<tr class="more-info">
<td colspan="3">More Info</td>
</tr>
</tbody>
</table>
It's some problems with your code:
- First of all you can not use div as direct child of tr. You need to wrap it with td.
- No need to run jquery initialization twice:
$(document).ready(function() { $(function() {
Here is example how you can do it: HTML:
<table>
<tr>
<td>Joe Bloggs</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td collspan="2"><div>555.555.555</div></td>
</tr>
<tr>
<td>Sam Doe</td>
<td>[email protected]</td>
</tr>
<tr class="info">
<td colspan="2">
<div>556.556.556</div>
</td>
</tr>
</table>
JS:
$(function() {
$('tr').not('.info').on('click', function() {
$('.info').hide();
$(this).next('.info').show();
});
});
$("tr").on("click", function(){
if ($(this).find(".info").css('display') == 'none')
{
$(this).find(".info").show();
} else
{
$(this).find(".info").hide();
}
});
<script src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
.info {
display: none;
}
</style>
<table>
<tr>
<td>Joe Bloggs</td>
<td>[email protected]
<div class="info">555.555.555</div>
</td>
</tr>
<tr>
<td>Sam Doe</td>
<td>[email protected]
<div class="info">556.556.556</div>
</td>
</tr>
</table>
本文标签: javascriptClick table row to show more informationStack Overflow
版权声明:本文标题:javascript - Click table row to show more information - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741998498a2410533.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论