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>
Related
I would like to load all table elements from my index.html which have the specified class assigned in a variable. Unfortunately the first line of HTML doesn't load correctly.
My HTML (example for one table, usually there a few of them):
<!-- More HTML stuff -->
<table class="class_TopTable table" id="id_TopTable">
<tr>
<td>
<button id="id_Remove">Remove 1</button>
</td>
<td>
<div id="id_Title"><B>Title 1</B></div>
<div id="id_Content">Content 1</div>
</td>
</tr>
</table>
<!-- More HTML stuff -->
My Javascript:
var all_class_TopTable = "";
$('.class_TopTable').each(function(){
all_class_TopTable += $(this).html();
})
After this JS is run, the variable of all_class_TopTable containts following HTML:
<tbody>
<tr>
<td>
<button id="id_Remove">Remove 1</button>
</td>
<td>
<div id="id_Title"><B>Title 1</B></div>
<div id="id_Content">Content 1</div>
</td>
</tr>
</tbody>
Where the first line is different as my real html.
I expect in the beginning <table class="class_TopTable table" id="id_TopTable"> and in the end </table>.
But the result is in the beginning <tbody> and in the end </tbody>.
What do I wrong?
You are getting the inner HTML of the table node(s), which excludes the table node(s) itself.
You could wrap all the content in a div and then get its html:
var all_class_TopTable = $('<div>').append($('.class_TopTable').clone()).html();
You could use the outerHTML property to capture the element itself along with its descendants.
all_class_TopTable += $(this)[0].outerHTML;
As the html method only captures its descendants, it wraps it with tbody.
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")
(Searched the web and here for a couple hours with no success...novice level programmer)
What I have: Table with single row, containing many short columns. The columns are entered chronologically in the HTML, adding new columns to the right. (This long row is in a short height, wide width page displayed in an iframe, and is manually scrolled left/right.)
What I want to do: Create a toggle-link reverse column display order so that the newest columns appear to the left and oldest to the right when desired.
Since my membership is new, I can't post a screenshot. So here's my best work-around attempt:
The web page this solution is to be applied to is found at:
thetransformer.us (home page, in the upper area iframe file)
A screenshot of a text illustration of desired output of a solution is found at:
thetransformer.us/images/reverse-col-order-illustration.jpg
CODE_BELOW: (Main page:) & (iframe file code (not scrollable DIV as I indicated earlier)
Many lines of the same type of code blocks omitted.
<div>
<iframe src="gallery.html" scrolling="yes" width="645" height="300" class="rounded10"></iframe>
</div>
<body style="margin:15px; background-image:url(images/bgrepeat.png)">
<div id="pl_main">
<button onclick="reverseOrder()">Reverse</button> <span style="color:white;">The horizontal link list is currently unavailable. Use View <span style="color:#99ccff;">Table of Contents</span> below.</span>
<table class="gallery">
<tr id="tableRow">
<td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1985</span> Jul<br /><img src="pl_thumbs/1985-07_thumb.jpg" />
</a></td>
<td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Jan-Feb<br /><img src="pl_thumbs/1986-01-02_thumb.jpg" />
</a></td>
<td valign="top" id="19862"><a href="86-0304.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Mar-Apr<br /><img src="pl_thumbs/1986-03-04_thumb.jpg" />
</a></td>
<td valign="top" id="19863"><a href="86-0506.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> May-Jun<br /><img src="pl_thumbs/1986-05-06_thumb.jpg" />
</a></td>
</tr>
</table>
</div>
</body>
</html>
Thanks, Doug
[EDIT]: Here is the solution of reversing the column in JQuery.
<body>
<button onclick="sortReverse()">Click</button>
<table class="gallery">
<tbody><tr id="tableRow"><!-- id for test code, may remvoe later -->
<td valign="top" id="19851"><a href="85-3.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1985</span> Jul<br><img src="pl_thumbs/1985-07_thumb.jpg">
</a></td>
<td valign="top" id="19861"><a href="86-0102.pdf#zoom=100" target="_blank">
<span style="color:#99ccff;">1986</span> Jan-Feb<br><img src="pl_thumbs/1986-01-02_thumb.jpg">
</a></td>
</tr>
</tbody></table>
// Remember to include JQuery library.
<script>
function sortReverse(){
// Select the parent element by id.
var row = $("#tableRow");
// Get all the children (columns)
var columns = $.makeArray($("#tableRow > td"));
// empty the parent content
row.empty();
// Append the reversed children array to the parent
row.append(columns.reverse());
}
</script>
</body>
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
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.