I have three div's, when user clicks on "1", div1 with id divOne12 should be displayed, when user clicks on 2 div2 with id divTwo12 should be displayed and div1 should be hidden, when user clicks 3 div3 with id divThree12 should be displayed and previous shown div should be hidden.
Again if user clicks Div2 previous shown div should be hidden and div2 with id divTwo12 should be displayed.
Please find the fiddle :http://jsfiddle.net/0p7djjnc/7/ .
Please suggest javascript changes.Thanks.
HTML code:
<table>
<tr>
<td>
<table>
<tr>
<td>
<div id="divOne12">
<div>
<table border="1">
<tr><th>Column1</th><th>Column2</th></tr>
<tr>
<td> Col1- data1
</td>
<td> Col2 - data1
</td>
</tr>
<tr>
<td> col1 - data2
</td>
<td> col2 - data2
</td>
</tr>
<tr>
<td> col3 - data3
</td>
<td> col3 - data3
</td>
</tr>
</table></div> </div><div id="divTwo12">Div 2</div>
<div id="divThree12">Div 3</div>
</td></tr>
<tr>
<td>
<table width="170px" border="1">
<tr>
<td>
Static Row
</td>
<td id="one12" class="navigateTest" onclick="navigate()"><b>1</b></td>
<td id="two12" class="navigateTest" onclick="navigate()"><b>2</b></td>
<td id="three12" class="navigateTest" onclick="navigate()"><b>3</b></td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
Css code to hide div's:
#divTwo12{
display: none;
}
#divThree12 {
display: none;
}
--EDIT--
DIV id are dynamic in my application, how can i retrieve dynamic div id in javascript function, please suggest.
Maybe you could use some data attribute:
<td id="one12" class="navigateTest" data-target="divOne12"><b>1</b></td>
<td id="two12" class="navigateTest" data-target="divTwo12"><b>2</b></td>
<td id="three12" class="navigateTest" data-target="divThree12"><b>3</b></td>
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).show().siblings('div').hide();
});
});
UpdatedFiddle
$(document).ready(function(){
$('#divOne12').hide();
$('#divTwo12').hide();
$('#divThree12').hide();
$('#div1').click(function(){
$('#divOne12').show();
$('#divTwo12').hide();
$('#divThree12').hide();
});
$('#div2').click(function(){
$('#divOne12').hide();
$('#divTwo12').show();
$('#divThree12').hide();
});
$('#div3').click(function(){
$('#divOne12').hide();
$('#divTwo12').hide();
$('#divThree12').show();
});
});
See Updated Fiddle here
Works for dynamic divs
HTML
<img id="img1" data-id="div1"/>
<img id="img2" data-id="div2"/>
<img id="img3" data-id="div3"/>
<img id="img4" data-id="div4"/>
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
JQUERY
$("#img1").on('click', function() {
$("div").hide();
$('#'+$(this).data('id')).show();
});
Simply replace show / hide with what you want to show or hide when the img is clicked.
HTML:
<table>
<tr>
<td>
<table>
<tr>
<td>
<div id="divone12">
<div>
<table border="1">
<tr><th>Column1</th><th>Column2</th></tr>
<tr>
<td> Col1- data1
</td>
<td> Col2 - data1
</td>
</tr>
<tr>
<td> col1 - data2
</td>
<td> col2 - data2
</td>
</tr>
<tr>
<td> col3 - data3
</td>
<td> col3 - data3
</td>
</tr>
</table></div> </div><div id="divtwo12">Div 2</div>
<div id="divthree12">Div 3</div>
</td></tr>
<tr>
<td>
<table width="170px" border="1">
<tr>
<td>
Static Row
</td>
<td id="one12" class="navigateTest" onclick="navigate()"><b>1</b></td>
<td id="two12" class="navigateTest" onclick="navigate()"><b>2</b></td>
<td id="three12" class="navigateTest" onclick="navigate()"><b>3</b></td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
JQUERY:
$(function(){
$('.navigateTest').click(function(){
$("div[id^='div']").hide();
var id=$(this).attr('id');
var divId='div'+id;
$('#'+divId).show();
});
});
CSS:
#divtwo12{
display: none;
}
#divthree12 {
display: none;
}
Related
I have a table that needs to have an undefined number of rows that should display a set number of elements when clicked (in this case div, because I read that it's the best way to use toggle on tr). Best I could do is make it for an already set number of elements...
jsfiddle.net - This is with the set number of elements.Working code..
And this is all I got so far trying to figure it out.
Working js code:
$('.warning').on('click', function(e) {
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
});
In this case, I need each clicked table row to display three corresponding divs.
Obviously, answer with jQuery but I would appreciate a solution in vanilla js as well.
EDIT: I am sorry, I neglected to mention I want to add a sliding animation. And slideToggle doesn't seem to work...
EDIT2: Marked best answer by Terry.
Changed fiddle to working code.
We can actually greatly simplify your markup for your table rows:
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
...and use the following logic:
.nextUntil('.warning') to select the trailing <tr> after each .warning element. See the documentation for .nextUntil().
Use .slideToggle() to show/hide elements, without the need to use overly verbose CSS detection
Here is the logic above, written in jQuery:
$('.warning').on('click', function() {
// Selects all siblings until the next `.warning` <tr>
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
If you only want to target downstream <tr> that has the class hidden (useful in the scenario where there might be other irrelevant <tr>s in the way that you do not want to toggle), you might want to add an optional filter instead:
$('.warning').on('click', function() {
// Selects all siblings until:
// 1. the next `.warning` <tr>, and
// 2. has the class "hidden"
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
Of course this means that you get strange stacked borders when hiding elements, because you are technically hiding the table row content, but not collapsing the table rows/cells themselves.
Here is a proof-of-concept example:
$(function() {
$('.warning').on('click', function() {
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden td div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
</tbody>
</table>
Please see below snippet , note that I've set all the hidden class , class='hidden' , it's usless to name each of them differntly :
$(".warning").on("click",function(){
$(this).nextUntil(".warning").find(".hidden").slideToggle();
})
table {
width: 75%;
border-collapse: collapse;
}
tr, td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden, .hidden1, .hidden2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
</tbody>
</table>
$(".warning").on("click", function() { use jQuery .on will add the event to dynamic element (future generated element).
then find the next hidden and toggle will do the trick.
check the example:
$(".warning").on("click", function() {
var nextHidden = $(this).next('.hidden');
nextHidden.find('div').slideToggle();
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
</tbody>
</table>
please let me know how to remove class hide from nextall sublevel when click on mainlevel. It should not remove hide class from other sublevel which is next to mainlevel. please check the table structure below:
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
<tr>
<td>
<a class="mainlevel">
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">
</td>
</tr>
</tbody>
</table>
If interpret Question correctly ? , try using .closest() to select parent of clicked element , .nextUntil() , :has() to select tr elements until next mainlevel , .find() to select .hide elements , .toggle() to toggle display of hide elements
$(".mainlevel").click(function() {
$(this).closest("tr").nextUntil("tr:has(.mainlevel)").find(".hide").toggle()
})
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">a</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">b</a>
</td>
</tr>
<tr>
<td>
<a class="mainlevel">click</a>
</td>
</tr>
<tr>
<td>
<a class="hide sublevel">c</a>
</td>
</tr>
</tbody>
</table>
I have a table with checkboxes that have a class of .toggle-extract and when clicked I'd like them to toggle the closest DIV with the class name .extract-years
Now the code I have should work, but it is driving me nuts trying to figure out why it won't trigger.
here is the JSFiddle example.
$(document).ready(function() {
$('.toggle-extract').on('click', function () {
$(this).closest('div').find('.extract-years').toggle("fast");
});
});
and here is the HTML
<table>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
</table>
You could change to
$(this).closest('tr').find('.extract-years').toggle("fast");
$(document).ready(function() {
$('.toggle-extract').on('click', function() {
$(this).closest('tr').find('.extract-years').toggle("fast");
});
});
body {
color: #000;
}
.extract-years {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
</table>
Fiddle
Update: for the second version mentioned as comment, the select statement can be changed to e.g.
$(this).closest('table').parent("td").next("td").
find('.extract-years').toggle("fast");
Adjusted Fiddle, and working version here:
$(document).ready(function() {
$('.toggle-extract').on('click', function() {
$(this).closest('table').parent("td").next("td").find('.extract-years').toggle("fast");
});
});
body {
color: #000;
}
.extract-years {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>
<table class="inline-table-body">
<tbody>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
<tr>
<td>
<table class="inline-table-body">
<tbody>
<tr>
<td>
<input type="checkbox" class="toggle-extract">
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="extract-years">Toggle Box</div>
</td>
</tr>
</table>
I have a table in which rows are added dynamically using jQuery (latest row on top using prepend). If it is an errorLine, text in the first column will be “x”. If it is a successLine the text in the first column will be numerals like 1,2,3…
If the latest row is an errorLine, I need to apply background color (using class “firstErrorLine”) and replace the text “x” with an image. At the same time I need to remove image from all other lines and replace image with text “x”. I tried multiple jQuery approaches but didn’t work. Following is one of the failed approaches.
//$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');
Any thoughts how we can achieve this?
Demo – jsFiddle
jQuery Code
$(document).ready(function ()
{
function styleFirstErrorLine(isFailureExist)
{
$("#tblVisualAidResult tbody tr").removeClass('firstErrorLine');
//$("#tblVisualAidResult tbody tr td:first img").hide().parents("tr td:first").html('x');
if(isFailureExist)
{
$("#tblVisualAidResult tbody tr:first").addClass('firstErrorLine');
var firstCell = $("#tblVisualAidResult tbody tr:first td:first");
$(firstCell).html('<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"/>');
}
}
styleFirstErrorLine(true);
});
HTML
<table id="tblVisualAidResult" class="resultLog" border="0" cellpadding="0" cellspacing="0"
style="width: 100%; display: table; background-color: rgb(229, 219, 226);">
<thead>
<tr>
<td class="Heading3" style="width: 20%;">
Serial No
</td>
<td class="Heading3" style="width: 30%;">
Container ID
</td>
<td class="Heading3">
Status
</td>
</tr>
</thead>
<tbody>
<tr class="Normal">
<td style="padding-left: 5px">
x</td>
<td>
TEST4
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
2
</td>
<td>
182145011
</td>
<td>
Received 2 of 2 of work lot S318214501
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test3
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test2
</td>
<td>
Case Label does not Exist
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
1
</td>
<td>
182145029
</td>
<td>
Received 1 of 2 of work lot S318214501
</td>
</tr>
<tr class="Normal">
<td style="padding-left: 5px">
<img width="50" height="50" class="errorImage" src="../images/Error2_BMP.JPG"></td>
<td>
test1
</td>
<td>
Case Label does not Exist
</td>
</tr>
</tbody>
</table>
If I understand correctly what you are trying to achieve, you should use td:first-child instead of td:first.
jsFiddle demo
I have a 2 columns TABLE with first TD containing another TABLE with 3 rows of contents and second TD with an image as below:-
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Wellness and Care
</td>
</tr>
<tr>
<td align="left">
630 Woodbury Drive
</td>
</tr>
<tr>
<td align="left">
641.613.1450
</td>
</tr>
<tr>
<td align="left">
No Webaddress
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" id="imgPhone">
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Hospital
</td>
</tr>
<tr>
<td align="left">
N/A
</td>
</tr>
<tr>
<td align="left">
641.613.1451
</td>
</tr>
<tr>
<td align="left">
No Webaddress
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" id="imgPhone">
</td>
</tr>
</tbody>
</table>
I am trying to disable the image on the second column of the row, if the Value of one of the TD is "N/A". I am stuck at getting the parent TR and going to second TD to do something.
My try is as follows:
$('#myTable tr').each(function () {
if ($(this).find("td").text().trim() == "N/A") {
var cellIndex = $(this).index();
var nextTD = $(this).children('td').eq(1).index();
// I am basically stuck here in getting next TD
}
});
Any help is appreciated!!
DEMO
$('#myTable td:first-child td:contains("N/A")').parents('td').next().find('img').hide();
Try
$( '#myTable td:first-child td:contains("N/A")' ).closest('tr').closest('td').next().find('img').hide()
Demo: Fiddle
What I would do in your case is add a class for your 4 tr tags with text. Then you can just parse through each of those 4 by their class and if one of them is equal to 'N/A' you can grab the image by its ID and hide it.
HTML:
<td class="test" align="left">
Wellness and Care
</td>
JQuery:
$('.test').each(function () {
if($(this).text().trim() == 'N/A') {
$("#imgPhone").toggle();
}
});
JSFiddle: http://jsfiddle.net/ax6Mv/
This should be enough to get you started:
$( '#myTable td:first td' ).each(
function() {
if ( $( this ).text().trim() == 'N/A' ) {
$( '#myTable td' ).eq( 1 ).hide();
}
}
);