I am trying to create a table of information for artists. Fields are generated dynamically from database. If any user clicks on artist name, few others information related to the artist shows down. At first rest of the information are kept hide.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td>Artist Name</td>
<td>Birth Year</td>
<td>Age</td>
</tr>
<tr id="collapsible">
<td><h2>A</h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
<tr id="collapsible">
<td><h2>B<h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
<tr id="collapsible">
<td><h2>C<h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
</table>
</body>
</html>
Jquery
$(document).ready(function(){
// hide all div containers
$('collapsible#rest').hide();
// append click event to the a element
$('#check-details').click(function(e) {
// slide down the corresponding div if hidden, or slide up if shown
$(this).parent().next('#rest').slideToggle('slow');
// set the current item as active
$(this).parent().toggleClass('active');
e.preventDefault();
});
});
You had quite a few errors there. For example, you can't have random div's inside table rows unless they are inside elements. I corrected the syntax and made some improvements to your javascript code.($(this).parents('.collapsible').next('.rest').slideToggle('slow');) jsFiddle http://jsfiddle.net/q6AmR/
$(this).parent()
Is incorrect, your a tag is in a h2 which is it's parent, you'd have to do
$(this).parent().parent().parent()
To get back to the tr which contains the div.
Also, having a div within a tr is poorly formed HTML, as if having a tr within a tr.
I would recommend changing the HTML to something like:
<table>
<tr>
<td><a href="" class="artistLink">Katy Perry</td>
<td></td>
<td></td>
</tr>
<tr class="rest">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
$("tr.rest").hide();
$("a.artistLink").click(function(e) {
$(this).parent().parent().next("tr.rest").slideToggle();
...
});
</script>
This was written on my iPad so might need tweaking!
Related
I'm designing a web-based solution and I have multiple tables that vary in size (record lengths) from 1 to 25 or so rows. I attempting to use the .after element by positioning the tables after the previous table, but I'm not sure how to implement. That is, my first table is positioned with an absolute setting, but I assume the remaining tables should be set with relative positioning, but relative to what?
Below is my test code without absolute positioning of tables and it works fine. But when I position the tables with absolute positioning, the insertadjacentHTML gets put at the top of the page. Note that I'm coding in ASP and pulling from a database and the number of rows returned varies and I want to position each table below the previous table.
<!DOCTYPE html>
<html>
<body>
<div id="table1">
<table border>
<tr>
<td>test</td>
</tr>
</table>
</div>
<div id="table2">
<table border>
<tr>
<td>table2</td>
</tr>
</table>
</div>
<div id="table3">
<table border>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
<tr>
<td>table3</td>
</tr>
</table>
</div>
<script>
var h = document.getElementById("table3");
h.insertAdjacentHTML("afterend", "<span style='color:red'>My span</span>");
</script>
</body>
</html>
I have a simple table of domains and subdomains.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Table</title>
</head>
<body>
<table>
<thead>
<th>doamin_name</th>
<th>subdoamin_name</th>
</thead>
<tr>
<td>bing.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td>images.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>mail.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>maps.google.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td></td>
</tr>
<tr>
<td>yahoo.com</td>
<td>stores.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>tw.news.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>view.yahoo.com</td>
</tr>
</table>
</body>
</html>
I need to show/hide subdomains when I click on domain row.
I tried jQuery slideToggle
$(document).ready(function(){
$(document).on("click", "tbody tr:eq(1)", function(){
$("tbody tr:nth-child(1n+3)").slideToggle(1000);
});
});
It works fine when I specify row numbers manually, but I need to find them automatically for every domain/subdomains, because table will grow in size.
So I need to check subdomain_name textContent:
If it's empty - this is a domain. Add EventListener to it, so on click it will show/hide it's subdomains.
If it's not empty - check domain_name textContect and add to rows that need to be hidden.
You can add class for the <td> of domain name using following css selector, then loop through the rows and using .closest().
ThefirstIndex is to determine the row without subdomain value
$(document).ready(function(){
$('tr>td:nth-child(1)').addClass('domainTd');
$(document).on("click", ".domainTd", function(){
var domainName= $(this).text();
var firstIndex=true;
$('tr>td:nth-child(1)').each(function(index){
if($(this).text()===domainName){
if(firstIndex){
firstIndex=false;
}else{
$(this).closest('tr').slideToggle()
}
}
})
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Table</title>
</head>
<body>
<table>
<thead>
<th>doamin_name</th>
<th>subdoamin_name</th>
</thead>
<tr>
<td>bing.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td>images.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>mail.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>maps.google.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td></td>
</tr>
<tr>
<td>yahoo.com</td>
<td>stores.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>tw.news.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>view.yahoo.com</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I have a multiple html tables in a same page, I want to get country code when on click on country get nearest country code value
Ex:- 1).country-click nearest -- India
Ex:- 2).country-click nearest -- China
Ex:- 3).country-click nearest -- Japan
Here is my table
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">India</td>
</tr>
</table>
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">China</td>
</tr>
</table>
<table>
<tr>
<td><button id="country">Country</button></td>
</tr>
<tr>
<td id="code">Japan</td>
</tr>
</table>
Here is script code
$(document).ready(function(){
$("button").click(function(){
console.log($(this).parents().closest('tr').find('#code').html());
});
});
Thanks for suggestions.
You can use siblings for table rows
Sorry for snippet code formating, I can't format it in this editor for some reason.
You are doing good on finding closest tr, now you have to check sibling rows that contain element with "#code" id (you should use class instead of id here, id must be unique, as berko commented).
Here is jquery code:
$(document).ready(function(){
$("button").click(function(){
alert($(this).closest('tr').siblings().find('#code').html());
});
});
..and here is snippet:
$(document).ready(function(){
$("button").click(function(){ alert($(this).closest('tr').siblings().find('#code').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="country">
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">India</td>
</tr>
</table>
<table id='country'>
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">China</td>
</tr>
</table>
<table id="country">
<tr>
<td><button>Country</button></td>
</tr>
<tr>
<td id="code">Japan</td>
</tr>
</table>
I am trying to find an OnClick Function that will work inside of a table.
When the page loads they content needs to be hidden, but given an option either but button or link to show it.
<div id="table-container">
<table id="maintable" border="1" cellspacing="0" cellpadding="1">
<thead>
<th class="blk" nowrap>Number</th>
<th class="blk" nowrap>Original Title</th>
<th class="blk" nowrap>Translated Title</th>
</thead>
<tbody>
<td class="lgt"><font size="4">2 Guns </font></td>
<tr><td class="lgt"><font size="4">Two Guns </font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish </font></td></tr>
<tr><td class="lgt"><font size="4">109 </font></td></tr>
This is roughly what I am trying to do, is be able to hide
<tr><td class="lgt"><font size="4">Two Guns </font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish </font></td></tr>
<tr><td class="lgt"><font size="4">109 </font></td></tr>
and or unhide them..
I have tried using the below input..
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<div id="wrap">
See more.</p>
<p>Hide this content.</p>
</div>
All that seems to do is lift the text in the cell of the table, and not the table..
UPDATE: Can't seem to get what exactly are you trying to do, so I'll try to cover the obvious.
I'm assuming you are coding the HTML yourself and not receiving the output of some server-side script, although that would be the most reasonable.
If you are coding the HTML, that means you can add classes, ids and tags as needed without problems. I would definitely do something entirely different but that would imply more convoluted code.
With multiple sections. A toggle per section:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script>
$(document).ready(function(){
$('.hidethis').hide();
$('.toggle').click(function(){
section = $(this).attr('data-section');
$(section + ' .hidethis').toggle();
});
});
</script>
</head>
<body>
<table id='section-1' border="1">
<caption>SECTION 1</caption>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
<table id='section-2' border="1">
<caption>SECTION 2</caption>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
<div class='toggle' data-section='#section-1'>Toggle section 1</div>
<div class='toggle' data-section='#section-2'>Toggle section 2</div>
</body>
</html>
One toggle per item:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script>
$(document).ready(function(){
$('.hidethis').hide();
$('.toggle').click(function(){
$('.hidethis', $(this).parent()).toggle();
});
});
</script>
</head>
<body>
<table id='section-1' border="1">
<tr>
<td>
<table>
<tr class='toggle'>
<td>
Always visible<br/>
<small>Toggle this</small>
</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr class='toggle'>
<td>
Always visible<br/>
<small>Toggle this</small>
</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
In this case, notice that in order to not over-complicate the jQuery code, you'll need some kind of container that parent both title and expandable content.
After much more searching about, I found this...
<html>
<head>
<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = '';
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
</head>
<body>
<span onClick="toggle();">toggle</span><br /><br />
<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>
</body>
</html>
It worked a treat, the problem I found with it, was I couldn't work out how to make it do more than just 1 row.. But in the other posts someone mentioned using..
<tbody>
So I did over the ones I needed.. Now I have included a button and I am done with it :)
Thanks for your help though
Ok someone had helped me with this, and this was the solution to making it work a treat.
<script type='text/javascript'>
$(document).ready(function(){
$(document).on('keyup', '#search-box', function(){
$('#maintable tbody:not(.myContent)').each(function(){
var movieTitle = $(this).find('td:nth-child(2)').text();
if (RegExp($('#search-box').val(), 'i').test(movieTitle)) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
<tr><!-- FIX: Needed to wrap it in a row -->
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
</tr>
<tbody class="myContent" style="display:none;">
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This/td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr><!-- FIX: close row -->
</tbody>
HTML:
<table id="collapse">
<tbody>
<tr>
<th>Heading</th>
</tr>
<tr>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
</tr>
</tbody>
</table>
Javascript/JQuery:
<script type="text/javascript">
$(document).ready(function()
{
$('#collapse');
});
</script>
CSS:
<style type="text/css">
#collapse tr{display:none;}
#collapse tr:first-child{display:table-row;}
/* or is there a prettier, better way to do this? */
</style>
How do I hide all children except the for the first child in Javascript/JQuery and CSS on page load?
So, it should actually just display:
<table id="collapse">
<tbody>
<tr>
<th>Heading</th>
</tr>
</tbody>
</table>
Note: I'd rather not add a CSS class to each child like .hide_child{display:none;}
<script type="text/javascript">
$(document).ready(function()
{
$('#collapse tr').not(":first-child").hide();
});
</script>
see: http://jsfiddle.net/FeVnt/