how can I use jquery to get the text inside of a td?
I currently have:
<div id="divName">
<table id="tableName">
<tr>
<td id="g${req.Name}</">${req.Name}</td>
<td><input type="button" id="showName_${req.fName} rel="viewName_${allReq.requestId}
value="Show " title="Show customer ${req.fName}"
onclick="buttonToggle(this,'Hide ','Show ','nameDiv_${req.fName}', '${req.fName}')" />
</td>
</tr>
</table>
<div id="nameDiv_${req.fName}" style="display: none">
<p>test</p>
</div>
</div>
I would like to be able to have the title of the show/hide button say Show customer John and when the button is clikced to hide for the title to change to Hide customer John and then when the button is clicked again to go back to the title to say show customer John.
I was able to use something like this for the show/hide button:
$('ShowHide').click(function(){
if ( $('hide').css('display') == 'block' )
$('ShowHide').val("Hide");
else
$('ShowHide').val("Show");
});
but how can I get the name to append to show and hide when the button is toggled?
You can use the text method to get the value of your <td>:
$('#your-td-id').text();
Here's an example of it working.
Related
I'm brand new to Javascript, and need some help. I have a table with 4 rows (3 displayed, and 1 display="none"). What I'm trying to do is display the 4th row via clicking on a link. Here's what my HTML looks like:
<table class="lessons">
<tr>
<td class="chapter">01</td>
<td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3>
<h3 class="desc">Program description....blah blah blah...</h3>
</tr>
<tr>
<td class="chapter">02</td>
<td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3>
<h3 class="desc">Description for chapter 2....blah blah...blah...</h3>
</tr>
<tr>
<td class="chapter">03</td>
<td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3>
<h3 class="desc">Description for chapter 3...blah blah blah....</h3>
</tr>
<tr class="hiddenRow" style="display:none;">
<td class="chapter">04</td>
<td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3>
<h3 class="desc">Chapter four description....blah blah...</h3>
</tr>
</table>
show hidden
And here's my javascript:
function showRows(){
var thisRow = document.getElementsByClassName('hiddenRow');
thisRow.style.display="";
}
Link to JSFiddle:
https://jsfiddle.net/99600cha/
I've tried doing the javascript function a few different ways with no success. Could someone show me what I'm doing wrong?
What I'm really trying to do is have the first and last rows displayed with the middle rows hidden and expandable, like this:
Chapter 1
(click to see all chapters)
Chapter 10
so if anyone can point me to something similar, please do!
Edit: Here is a link that shows the exact effect I'm trying to accomplish: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting
if your are using jquery:
function showRows(){
$('.hiddenRow').hide();
}
In var thisRow = document.getElementsByClassName('hiddenRow'); thisRow returns an array of elements that have such class, you have to use thisRow[0] to select a first element.
However, a more elegant and cleaner solution would be making this layout:
<div class="lessons" id="lessons">
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson-hidden">
<div class="chapter">A hidden lesson.</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
</div>
By using this simple CSS rule you will be able to hide all elements by changing a single class:
.lessons .lesson-hidden { display: none; }
.lessons.full .lesson-hidden { display: block; }
To show hidden lessons, use this line:
document.getElementById("lessons").classList.add("full")
To revert, use this line: document.getElementById("lessons").classList.remove("full")
I'm trying to click-to-show some text within a table with the following code:
<%
if isarray(myArray) <> FALSE then
For Counter = 0 to RowNumber
%>
<tr>
<td>col1</td>
<td>col2</td>
<td><img src="/bullet.png"/>
<div id="adiv" style="display:none">Hello</div></td>
</tr>
I want the revealed text to appear within the same <td>, on the same row that was clicked but it always appears on the first row of the table, regardless of which row is clicked.
Could someone point out what I'm missing here?
-EDIT-
Removed orphan div and closed <a> tag wrt Rick Hitchcock's answer.
Your a tag isn't closed, and you have an orphan </div> tag:
... <img src="/bullet.png"/><a></div> ...
Change to this:
... <img src="/bullet.png"/></a> ...
Also: ids must be unique, but you have the same "adiv" id on each row of your table. You could remove the id and do this instead:
<td>
<a onclick="hideshow(this.parentNode.querySelector('div'))">
<img src="/bullet.png"/>
</a>
<div style="display:none">Hello</div>
</td>
I have a table structured like that:
<table id="example">
<thead>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
</thead>
<tbody>
<tr>
<td>some php to get custom field</td>
<td>also custom field- the loop is above so this is working as it should</td>
<td>
<a href="#" class="showhide">
<div class="more">
.. the content I want to show when user clicks a class="showhide"
</div>
</a>
</td>
<tr>
</tbody>
</table>
I tried to implement with jQuery, but nothing happens. This is the jQuery I tried:
$(function () {
$('.showhide').click(function () {
$(this).next().toggle()
});
});
I also make it with document.ready and still not working. Is there any other way to do that?
All I want is that the content of the div class="more" is to be shown under the row in the table (and in front of the next one), of course when the a class="showhide" is clicked.
I am using this together with plugin DataTables, but this is not causing problems.
The class you have is showmore not showhide
Live Demo
$(function() {
$('.showmore').click(function(){
$(this).next().toggle()
});
});
Edit based on OP comments: I have shorten the html to make it simple and took div out of a tag.
Live Demo
Html
<table id="example">
<tbody>
<tr>
<td> Show / Hide
<div class="more">.. the content I want to show when user clicks a class="showmore"</div>
</td>
</tr>
</tbody>
</table>
Javascript
$(function () {
$('.showhide').click(function () {
$(this).next().toggle()
});
});
Either change this in the markup:
class="showmore">
to this:
class="showhide">
or do this:
$('.showmore').click(function (e) {
e.preventDefault();
$(this).next().toggle()
});
Note:
This is invalid html:
<a href="#" class="showhide">
<div class="more">
.. the content I want to show when user clicks a class="showhide"
</div>
change to this:
show more
<div class="more">
.. the content I want to show when user clicks a class="showhide"
</div>
or you can try this one with .children() not with .next():
$('.showmore').click(function (e) {
e.preventDefault();
$(this).children('more').toggle();
});
TRYOUT IN FIDDLE HERE
$(document).on('click','.showmore',function(){
//your code..
})
I am trying to complete a rollover or hoverover for a few links to display a div with a few screenshots. How should I go about writing this script?
Here is my HTML
<section class="tabs-content">
<table class="imagetable" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th colspan="2" class="reportname">Exam Reports</th>
</tr>
<tr>
<td valign="top" class="formlabel" width="50%"><p><strong>For Faculty</strong><br />
</p>
<ul>
<li><strong>Exam Summary</strong><br />
<em>Colorful and attractive end-of-exam report provides a clean summary from Learning Outcomes to At-Risk students<br />
</em><br />
</li>
<% if session("medical") = 1 then %>
<li><strong>Category Analysis</strong><br />
<em>Learning outcomes performance breakdown</em><br />
<br />
</li>
<% end if %>
<li><strong>Item/Question Analysis</strong><br />
<em>Take an in-depth look at each item and its' performance</em><br />
<br />
</li>
<li><strong>List of Students Scores</strong><br />
<em>Simple list of every exam takers performance…configurable</em></li>
</ul>
<p> </p>
<p><strong>For Students</strong><br />
</p>
<ul>
<li><strong>Release results directly to students</strong><br />
<em>Make results available to students…configurable from simple to colorful</em></li>
</ul></td>
<td valign="top" class="formfield" width="50%"><p><strong>Misc Administrative Reports<br /> <!--this section will be hidden and an image placeholder will display the images from the above report links-->
</strong></p>
<ul>
<li>ET Elapsed Time</li>
<li>Backward Navigation</li>
<li>Unanswered Essays</li>
<li>Mid-Exam Restart</li>
<li>Hardware Comparison</li>
<li>Absentee Report</li>
<li>Missing Keywords</li>
</ul></td>
</tr>
</table>
</section>
</div>
</div>
Ideas? I wan the last list to be replaced by an image on rollover of the above links.
Chris
Use jQuery's .hover() method. It allows you to define a method that fires when the user hovers over a selector. It also has a hoverOut event handler where you define a method to address as user leaving the selector.
jquery hover api
this would be relevant for you:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject)A function to execute when the mouse pointer enters the element.
handlerOut(eventObject)A function to execute when the mouse pointer leaves the element.
so you sould do something like:
$('yourLinkSelector').hover(function(){
//handle the user mouseover here..
//remove last list
//show your screenshot div
}, function(){
//handle the mouseout here..
//do whatever div removal you need for the screenshot div
//show last list again...
});
I have few td in my code.
The scenario is when I click on a td,the content below the td which is hidden on load needs to be displayed .
I have few events to handle with the elements in the dropdown.
I have used the same structure for all the tds, the problem is when I click on the first td, the dropdown appears and when I click on the second td, the dropdown elements coded in the second td also appears.
My scenario is when I click on any td, the dropdowns present below that td alone should appear and the other dropdown should disappear if they are shown.
My code is as follows:
$("#timeofday p").bind('click',function(event){
$(this).parent().find(" > .dropdown").slideToggle();
$(this).text($(this).text() == 'CLOSE' ? 'AFTERNOON' : 'CLOSE');
});
my html is as follows:
<tr>
<td id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
<td id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
</tr>
Well, this seems to work:
$("#timeofday p").click(function(event){
$("#timeofday .dropdown").slideUp();
$("#timeofday p").text($("#timeofday p").text('CLOSE') );
$(this).parent().find(" > .dropdown").slideToggle();
$(this).text($(this).text('AFTERNOON') );
});
Here's an example http://jsfiddle.net/9LkDU/4/
onclick -- hide the element by making its visibility:hidden or display:none with JS..
var div = document.getElementById("idOfYourElementToBeHidden");
div.style.visibility="hidden"; // this preserves the space occupied by the div
div.style.display="none"; // this frees up the space occupied by tat div