I have a simple menu with collapsing tables, working with Javascript. My problem is when I open it in the browser it comes up with all tables already collapsed! How can I open it with the menu sections "closed", to then collapse each section only onclick? I know it's in the Javascript but I'm new to it so bear with me... Thank you!
Here's the basic code:
<head>
<script>
function doCollapse(rowname)
{
theElement = document.getElementById(rowname);
if(theElement.style.display == 'none'){
theElement.style.display = '';
}else {
theElement.style.display = 'none';
}
return false;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<p1 onClick=" doCollapse ('r1');">JQ</p>
</td></tr>
<tr>
<td id="r1">ver biografia</td></tr>
<tr>
<td>
<p2 onClick=" doCollapse ('r2');">Obras</p>
</td>
</tr>
<tr>
<td id="r2">lista</td></tr>
<tr>
<td>
<p3 onClick=" doCollapse ('r3');">Exposições</p>
</td>
</tr>
<tr>
<td id="r3">lista</td></tr>
</table>
</body>
</code>
Since you are using pure javascript and not a library like jquery, I'd suggest a couple of modification to easily target your elements. Try to put the items to show and hide inside a span so you can use document.getElementsByTagName and then add the Id to those spans rather than on td. My concern was that you have more td in your code, so you using document.getElementsByTagName would affect them as well, which is not what you need. However, you need to be careful that my solution would also suffer from that side effect if you have more spans in your code, which is likely, so you need to take this consideration before you implement this live. Here is the code and you can see a live demo here
<head>
<script>
function init(){
var numberOfRows = document.getElementsByTagName('span').length;
for (var i = 0; i < numberOfRows; i++){
document.getElementsByTagName('span')[i].style.display = 'none';
}
}
function doCollapse(rowname)
{
theElement = document.getElementById(rowname);
if(theElement.style.display == 'none'){
theElement.style.display = 'inline';
}else {
theElement.style.display = 'none';
}
return false;
}
</script>
</head>
<body onload="init()">
<table>
<tr>
<td>
<p onClick=" doCollapse ('r1');">JQ</p>
</td></tr>
<tr>
<td><span id="r1">ver biografia</span></td></tr>
<tr>
<td>
<p onClick=" doCollapse ('r2');">Obras</p>
</td>
</tr>
<tr>
<td><span id="r2">lista</span></td></tr>
<tr>
<td>
<p onClick=" doCollapse ('r3');">Exposições</p>
</td>
</tr>
<tr>
<td><span id="r3">lista</span></td></tr>
</table>
Related
I had create a table with two method of toggle function, first toggle is toggle table row with its specific ID and second toggle is toggle all the table row. However, if i click on first toggle at first parent row, and then when i click on second toggle, the child of first parent will hide, where it suppose follow other parent show their child and then click again to hide the child. And if all child is shown, the image also should change from details_open.png become details_close.png
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="w3.css" rel="stylesheet" />
<body>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function toggle(thisname, image) {
var path = image.src;
var filename = path.match(/.*\/([^/]+)\.([^?]+)/i)[1];
if (filename == 'details_open') {
image.src = 'details_close.png';
}
if (filename == 'details_close') {
image.src = 'details_open.png';
}
tr = document.getElementsByTagName('tr')
for (i = 0; i < tr.length; i++) {
if (tr[i].getAttribute(thisname)) {
if (tr[i].style.display == 'none') {
tr[i].style.display = '';
} else {
tr[i].style.display = 'none';
}
}
}
}
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
$('.td1').toggle();
});
});
</script>
<input type="button" id="btn" style="color:red" name=btn value="Toggle Child Accessories">
<table class="w3-table-all">
<thead>
<tr>
<td onclick="toggle(1,open_1);">
<center><img id="open_1" src="details_open.png" style="width:20px;cursor: pointer;"></center>
</td>
<td> A </td>
<td> B </td>
</tr>
</thead>
<thead>
<tr 1=fred style='display:none;' class='td1' id='td1'>
<td> </td>
<td> C </td>
<td> D </td>
</tr>
</thead>
<thead>
<tr>
<td onclick="toggle(2,open_2);">
<center><img id="open_2" src="details_open.png" style="width:20px;cursor: pointer;"></center>
</td>
<td> E </td>
<td> F</td>
</tr>
</thead>
<thead>
<tr 2=fred style='display:none;' class='td1' id='td1'>
<td> </td>
<td> G </td>
<td> H </td>
</tr>
</thead>
</table>
</body>
</html>
If i understand correcly your need, you just need to control your rows's visibility to force toggle to hide or show all with his parameter display http://api.jquery.com/toggle/#toggle-display
$('#btn').click(function(e) {
e.preventDefault();
var display = true;
if ($('.td1:visible').length == $('.td1').length) {
display = false;
}
$('.td1').toggle(display);
});
https://codepen.io/anon/pen/xJymRr?editors=1010
I hope this will help you
Since you are using jQuery, you can use jquery toggleClass()to swap the images using your css classes. jquery toggleClass. also noticed you have double <body> tag
About this problem, I saw a some solution here at Stack Overflow and the solution redirects me here: http://jsfiddle.net/9hGym/
On JS fiddle, the code works but when I implement it on my editor and run it, it's not working. By the way, as a library I used Google CDN, I don't know if it is proper way, so help me. Here's my code by the way..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language = "javascript">
// Write on keyup event of keyword input element
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
</script>
</head>
<body>
<div class="row large-centered">
<h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
</div>
<div class="row large-centered">
<input type="text" id="search" placeholder="Type to search..." />
<table id="table" width="100%">
<thead>
<tr>
<th>Character name</th>
<th>Class</th>
<th>Realm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Benjamin.</td>
<td>Rogue.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Cachoito.</td>
<td>Hunter.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Contemplario.</td>
<td>Paladin.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Elthron.</td>
<td>Death Knight.</td>
<td>Agamaggan ES.</td>
</tr>
<tr>
<td>Giloh.</td>
<td>Priest.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Kitialamok.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Magustroll.</td>
<td>Mage.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Marselus.</td>
<td>Mage.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Mistrala.</td>
<td>Warrior.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Suavemente.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Tittus.</td>
<td>Monk.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Yarlokk.</td>
<td>Warlock.</td>
<td>Uldum ES.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You should place the javascript code within a $(document).ready, this will ensure the function is run after the DOM is ready.
<script language = "javascript">
$( document ).ready(function(){
// Write on keyup event of keyword input element
$("#search").keyup(function(){
_this = this;
// Show only matching TR, hide rest of them
$.each($("#table tbody").find("tr"), function() {
console.log($(this).text());
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) == -1)
$(this).hide();
else
$(this).show();
});
});
});
</script>
You can try to use getElementsByTagName, and catch all "TD" elements, like this:
<html>
<body>
<script>
function _Change()
{
var TD = document.getElementsByTagName('td');
i=0;
do {
if ( TD[i].innerHTML.trim().localeCompare("three") == 0 ) TD[i].innerHTML = "3";
i++;
} while(i<TD.length)
}
</script>
<table border=1>
<tr><td> one </td> <td> two </td></tr>
<tr><td> three </td> <td> four </td></tr>
<tr><td> five </td> <td> six </td></tr>
</table>
<button onclick="_Change()"> change </button>
</body>
</html>
I am attempting to have jQuery total form data on an internal form. I have used the current code on jsfiddle.net and it worked on there with jQuery 1.6.4.
I have tried multiple different jQuery versions. But I am new to jQuery/javascript in general so I have no idea where to proceed from here.
Any help would be much appreciated!
<script type="text/javascript" src="jquery-1.6.4.js">
var $form = $('#apple-order'),
$summands = $form.find('.apple'),
$sumDisplay = $('#total');
$form.delegate('.apple', 'change', function ()
{
var sum = 0;
$summands.each(function ()
{
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay.text(sum);
});
</script>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" id="apple-order">
<tr>
<td>
<form name="apple" method="post" action="insert.php">
<tr>
<td colspan="3" align="center"><strong>Caramel Apple Order Form</strong></td>
</tr>
<tr>
<td>Employee Name</td>
<td>: </td>
<td><input name="name" type="text"></td>
</tr>
<tr>
<td>Plain Caramel Apple</td>
<td>: </td>
<td><input name="plain" type="text" class="apple"></td>
</tr>
<tr>
<td>w/ Snickers</td>
<td>: </td>
<td><input name="snickers" type="text" class="apple"></td>
</tr>
<tr>
<td>w/ Butterfinger</td>
<td>: </td>
<td><input name="butter" type="text" class="apple"></td>
</tr>
<tr>
<td>w/ Mini M&Ms</td>
<td>: </td>
<td><input name="mini" type="text" class="apple"></td>
</tr>
<tr>
<td>w/ Pretzels</td>
<td>: </td>
<td><input name="pretzel" type="text" class="apple"></td>
</tr>
<tr>
<td colspan="3" align="center"><strong>Apples w/ Toppings come with Chocolate Drizzle</strong></td>
</tr>
<tr>
<td colspan="3" align="center">Total: <span id="total"></span></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value="SUBMIT"> </td>
</tr>
</tr>
</table>
Your <script> tags are laid out incorrectly. You need to separate the tags that load external libraries from inline scripts, as I have shown below. You should also load your Javascript at the bottom of the page, after your HTML is declared.
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
var $form = $('#apple-order'),
$summands = $form.find('.apple'),
$sumDisplay = $('#total');
$form.delegate('.apple', 'change', function ()
{
var sum = 0;
$summands.each(function ()
{
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay.text(sum);
});
</script>
You are attempting to access elements before they exist. Wrap your code in a DOM ready handler. Additionally, if you have a script element with a src attribute, you can't put code in it. You need two script tags:
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
$(function () {
var $form = $('#apple-order'),
// etc
});
</script>
By default, jsfiddle wraps your code in an onLoad handler, which can be confusing.
Declare all your libraries first
<script type="text/javascript" language="javascript" src="jquery-1.6.4.js"></script>
...
then start coding in another place
<script>
// do something
</script>
I think the problem is that you're not actually importing jQuery. Try adding the following before your script:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This will download jQuery from Google's CDN.
I have a table that I would like to dynamically hide/reveal rows in, based on checkboxes at the top.
I would like to do this without jQuery, just vanilla Javascript.
I have seen numerous methods on this site and others, but always snippets of code,not complete working examples.
I don't want to give each row a separate div name, or whatever, I am assuming there is a way I can do this with a common class for the 3 types of rows I want to hide/reveal.
Can anyone please show me a working example which allows checkboxes to hide/show multiple rows from a table with vanilla Javascript?
Given HTML like the following:
<table>
<thead>
<tr>
<td>
<label>
<input type="checkbox" class="show" value="north" checked />North</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" class="show" value="south" checked />South
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" class="show" value="outOfArea" checked />Out of area
</label>
</td>
</tr>
</thead>
<tbody>
<tr class="north">
<td>North One</td>
</tr>
<tr class="north">
<td>North Two</td>
</tr>
<tr class="outOfArea">
<td>Out-of-area One</td>
</tr>
<tr class="south">
<td>South One</td>
</tr>
<tr class="south">
<td>South Two</td>
</tr>
<tr class="north">
<td>North Three</td>
</tr>
<tr class="north">
<td>North Four</td>
</tr>
<tr class="south">
<td>South Three</td>
</tr>
<tr class="outOfArea">
<td>Out-of-area Two</td>
</tr>
</tbody>
</table>
The following jQuery seems to do as you seem to describe:
$('thead input[type=checkbox]').change(function(){
var self = this;
$(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});
JS Fiddle demo.
As it seems that you'd prefer a plain-JavaScript approach, I'd suggest the following (to work on the same HTML as posted above):
function toggle (e) {
var self = e.target,
toggleClass = '.' + self.value,
toToggle = document.querySelectorAll(toggleClass);
for (var i = 0, len = toToggle.length; i < len; i++) {
toToggle[i].style.display = self.checked ? 'table-row' : 'none';
}
}
var thead = document.querySelector('thead');
thead.addEventListener('change', toggle);
JS Fiddle demo.
References:
jQuery:
Attribute-equals ([attribute="value"]) selector.
change().
closest().
find().
filter().
toggle().
Plain JavaScript:
document.querySelector().
document.querySelectorAll().
EventTarget.addEventListener().
Looks like you are describing something along the lines of this example
Please check my HTML below:
<table cellpadding="0" cellpadding="0" border="0">
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo1</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo1 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo2</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo2 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo3</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo3 Content</div>
</td>
</tr>
<tr>
<td>
<div class="toogler">Demo4</div>
</td>
</tr>
<tr>
<td>
<div class="element">Demo4 Content</div>
</td>
</tr>
</table>
Here is my JS Code:
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// this will alert all the toogler div object
});
</script>
my problem is that how can i fetch the object of the next div with class element
if i have object of the first toogler then how can i get the object of the next first div which class 'element'
I don't want to give the ids to the elements
if you can't alter the html output and refactor as suggested by oskar (best case), this works:
e.getParent().getParent().getNext().getFirst().getFirst() - it will return you the next div but it's slow.
unfortunately, tables break .getNext("div.element") as it's not a sibling.
another way that works is this (if their lengths match) - it will be MUCH faster if the reference is put in element storage as a 1-off:
var tooglers = $$("div.toogler"), elements = $$("div.element");
tooglers.each(function(el, i) {
console.log(elements[i]);
el.store("contentEl", elements[i]);
});
i don't like either solution though, not maintainable / scalable enough.
You shall have to iterate through and check for the class one by one.
The easiest way of assigning a toggler to the toggled element:
$$('.toogler').each(function(e, index){
console.log($$('.element')[index]);
});
Here's a working example: http://jsfiddle.net/oskar/aTaBB
Also, get rid of the table.
Try using Element.getNext([match]).
<script type="text/javascript" language="javascript">
$$('.toogler').each(function(e){
alert(e);
// Get the next sibling with class element.
var nextElement = e.getNext('.element');
alert(nextElement);
});
</script>