So I have a below, the code can be seen below:
<table>
<tr>
<td id="first">itemOne</td>
<td id="firstClicked">itemOneInfo</td>
</tr>
<tr>
<td id="second">itemTwo</td>
<td id="secondClicked">itemTwoInfo</td>
</tr>
</table>
I want #firstClicked and #secondClicked to be hidden when #first and #second are clicked, I want #firstCLicked and #secondClicked to appear. How would I make that happen? So far I have
$('#firstClicked').css('visiblilty','hidden');
$('#first').click(function() {
$('#firstClicked').css('visibility','visible');
});
But this isn't working. Plus, even if this works, I'd have to do the same thing for #second, and i'm planning on creating more 's as well so I dont want to repeat the same code several times. Is there any better way of doing this?
I'd recommend using jQuery's hide and show functions, as well as the on function for event handling. jQuery's main power is that it makes things "just work" across browsers, so using hide will let the library choose what to do in order to make that action happen, rather then you having to second guess yourself. Example:
$('#firstClicked').hide();
$('#first').on('click',function() {
$('#firstClicked').show();
});
In addition, in your original code, you have a few mistakes:
$('firstClicked').css('visiblilty','hidden');
// should be:
$('#firstClicked').css('visibility','hidden');
However, as you're worried about having to duplicate your code, you could do the following:
HTML:
<table>
<tr>
<td id="first" class="clickable">itemOne</td>
<td id="firstClicked"><div class="initiallyHidden">itemOneInfo</div></td>
</tr>
<tr>
<td id="second" class="clickable">itemTwo</td>
<td id="secondClicked"><div class="initiallyHidden">itemTwoInfo</div></td>
</tr>
</table>
JS:
$('.initiallyHidden').hide();
$('.clickable').on('click',function() {
$(this).siblings("td").children(".initiallyHidden").show();
});
This way any element with a class clickable, when clicked, will look for a sibling with class initiallyHidden and show it
Edit: Updated example to deal with the issue raised in Christophe's comment.
Updated:
using display none on a table cell is a really bad idea – Christophe
Solution: use <span> or <div> element inside <td>
Try this:
$('#firstClicked span').css('display','none');
$('#first').click(function() {
$('#firstClicked span').css('display','block');
});
Or this:
$('#firstClicked span').hide();
$('#first').click(function() {
$('#firstClicked span').show();
});
Working full code:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#firstClicked span').css('display','none');
$('#first').click(function() {
$('#firstClicked span').css('display','block');
});
$('#secondClicked span').hide();
$('#second').click(function() {
$('#secondClicked span').show();
});
});
</script>
</head>
<body>
<table>
<tr>
<td id="first">itemOne</td>
<td id="firstClicked"><span>itemOneInfo</span></td>
</tr>
<tr>
<td id="second">itemTwo</td>
<td id="secondClicked"><span>itemTwoInfo</span></td>
</tr>
</table>
</body>
</html>
$('tr').find('td:first').next().css('visibility','hidden');
$('tr').find('td:first').css('cursor','pointer');
$('tr').find('td:first').click(function() {
$(this).next().css('visibility','visible');
});
find('td:first') points to the first cell of each row.
find('td:first').next() points to the second cell of each row.
This addresses the last part of your question:
i'm planning on creating more 's as well so I dont want to repeat the same code several times
What about:
<script>
function show(div) {
document.getElementById(div).style.display = 'block';
}
</script>
<table>
<tr>
<td id="first" onclick="show('firstClicked')">itemOne</td>
<td id="firstClicked" style="display:none">itemOneInfo</td>
</tr>
<tr>
<td id="second" onclick="show('secondClicked')">itemTwo</td>
<td id="secondClicked" style="display:none">itemTwoInfo</td>
</tr>
</table>
Related
If all the cells in my table have been clicked, I want to pop up an alert.
<td id="1" onclick="this.style.backgroundColor = 'Red';">1</td>
<td id="2" onclick="this.style.backgroundColor = 'Red';">2</td>
<td id="3" onclick="this.style.backgroundColor = 'Red';">3</td>
<td id="4" onclick="this.style.backgroundColor = 'Red';">4</td>
<td id="5" onclick="this.style.backgroundColor = 'Red';">5</td>
(I'm making the background red so that I know it has been clicked). This is the script that I've been trying to get to work:
<script>
$(document).ready(function () {
$('#1' && '#2' && '#3' && '#4' && '#5' ).click( function() {
alert('Bingo!'); });
});
</script>
If I click on cell number 5 right away, the alert pops up. What I want is when every cell is already clicked, only then should the alert show up.
If you're wanting to set each cell to have a red background individually on click it would be done like this and will alert after all 5 have been clicked.
$('#one, #two, #three, #four, #five').click( function() {
$(this).toggleClass("redbg");
if($('.redbg').length == 5)
alert('Bingo!');
});
.redbg
{
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="one">1</td>
<td id="two">2</td>
<td id="three">3</td>
<td id="four">4</td>
<td id="five">5</td>
</tr>
</table>
Also, as T.J. Crowder pointed in the comments below. Starting an ID with a numeric value is invalid for CSS. You can do that with with class identifiers, but not IDs. I've changed your IDs in this example.
'#1' && '#2' && '#3' && '#4' && '#5' is equivalent to '#5'. && on strings doesn't work that way.
What you probably want to do is something like watch all of them for click, change the class on click to 'clicked', and then check that 5 cells have the 'clicked' class.
You do not need to hard code all ids for a selection; we can select HTML elements as well.
<!DOCTYPE html>
<html>
<head>
<style>
.bgColor {
background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("td").click(function(){
$(this).toggleClass("bgColor");
if($('.bgColor').length == 5)
alert('Bingo!');
});
});
</script>
</head>
<body>
<table>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
<td id="4">4</td>
<td id="5">5</td>
</tr>
</table>
</body>
</html>
I wasn't quite sure how to word this in the title, so thank you for clicking to on this.
So now to my problem:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
.block {
background-color: black;
}
</style>
<table border='1px'>
<tr>
<td id='11'></td>
<td id='12'></td>
<td id='13'></td>
<td id='14'></td>
<td id='15'></td>
</tr>
<tr>
<td id='21'></td>
<td id='22'></td>
<td id='23'></td>
<td id='24'></td>
<td id='25'></td>
</tr>
<tr>
<td id='31'></td>
<td id='32'></td>
<td id='33' class="block"></td>
<td id='34'></td>
<td id='35'></td>
</tr>
<tr>
<td id='41'></td>
<td id='42'></td>
<td id='43'></td>
<td id='44'></td>
<td id='45'></td>
</tr>
<tr>
<td id='51'></td>
<td id='52'></td>
<td id='53'></td>
<td id='54'></td>
<td id='55'></td>
</tr>
</table>
<button onclick="blockUp()">Up</button>
<button onclick="blockDown()">Down</button>
<button onclick="blockLeft()">Left</button>
<button onclick="blockRight()">Right</button>
<script>
var blockUp = function() {
var oldBlock = document.getElementsByClassName("block")[0].id;
var newBlock = Math.floor(oldBlock + 1);
document.getElementById(newBlock).classList.add("block");
document.getElementById(oldBlock).classList.remove("block");
}
</script>
</body>
</html>
This code is not complete, as I want to fix this problem first.
I want to use Math.floor to get a certain ID (thus, IDs as numbers), and manipulate them. More specifically, I want to find the ID of the cell that currently has the .block class, find the ID of the cell above that using Math.floor(oldBlock + 1), remove the class from the original cell, and add the class to the new cell. I used variables so that the function would always be able to run, rather than making a million if/else if/else statements.
Unfortunately, this doesn't work with my current code. How would I be able to do this?
Any help is appreciated!
You have to make sure that "oldBlock" contains a number before trying to do math with it (like adding 1):
var oldBlock = +document.getElementsByClassName("block")[0].id;
That's one way of doing it. You could also use parseInt():
var oldBlock = parseInt(document.getElementsByClassName("block")[0].id, 10);
The value of the "id" property will be a string, so if you involve that in an addition operation JavaScript will treat it as string concatenation. By forcing it to be a number first, you'll get the effect you want.
I've got a html-table that is actually a chessboard. Something like:
<table id="chessboard">
<tr>
<td id="A8"></td>
<td id="B8"></td>
<td id="C8"></td>
<tr>
<tr>
<td id="A7"></td>
<td id="B7"></td>
<td id="C7"></td>
<tr>
<tr>
<td id="A6"></td>
<td id="B6"></td>
<td id="C6"></td>
<tr>
</table>
Now I am trying to make a JQuery script that returns the cell id (ie "A8", "B6", etc) once one clickes anywhere on in the table (chessboard). I've tried a lot, but I can't get it to work.
One of the things I tried:
$("#chessboard").on("click", function(cell){
alert(cell.target).attr("id"));
})
Anybody got a solution?
Try:
$("#chessboard td").on("click", function(cell){
alert(this.id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="chessboard">
<tr>
<td id="A8">A8</td>
<td id="B8">B8</td>
<td id="C8">C8</td>
<tr>
<tr>
<td id="A7">A7</td>
<td id="B7">B7</td>
<td id="C7">C7</td>
<tr>
<tr>
<td id="A6">A6</td>
<td id="B6">B6</td>
<td id="C6">C6</td>
<tr>
</table>
cell.target in this case refers to the DOM element that dispatched the event. DOM elements don't have a .attr() method, that is a jQuery object method.
To use it, you'd need to first wrap up your DOM element in a jQuery object:
$("#chessboard").on("click", function(e){
$cell = $(e.target);
alert($cell.attr('id'));
});
Nitpick: Call the event something relevant, not cell. It'll just confuse you later on.
Try something like...
$('#chessboard').click(function() {
alert($(this).attr('id'));
});
The 'this' works like a charm.
Also don't forget to reference the jquery script somewhere in your document:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Try this mate
$("#chessboard tr").on("click","td", function(cell){
alert(this.id);
})
this is the example on JSFIDDLE
Thanks for the replies. I've got the answer.
This worked:
$("#chessboard td").on("click", function(cell){
alert(this.id);
})
I'm currently working on a set of tables and i've gotten them to expand and contract at the click of a button. I'm having problems however to create a button that expands all the tables at the same time. Please see my code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> <!--this first part is easy to implement-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
$('.vis'+$(this).attr('vistoggle')).toggle();
});
});
</script>
</head>
<body>
Expand all <!--vistoggle needs to have values 1 and 2 in it-->
<table>
<tr>
<td>safeaef</td>
<td>asdfaef</td>
<td>asfead</td>
<td>Expand</td>
</tr>
<tr class="vis1" style="display:none">
<td>asdfae</td>
<td>zxcvry</td>
<td>rteyertr</td>
<td></td>
</tr>
<tr class='vis1' style='display:none'>
<td>tsersg</td>
<td>sdgfs</td>
<td>wregssdf</td>
<td></td>
</tr>
<tr class="vis1" style="display:none">
<td>sdfgrs</td>
<td>sgdfgsr</td>
<td>Cewret</td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>cfasdfas</td>
<td>1adfaed</td>
<td>asdfasdfea</td>
<td>Expand</td>
</tr>
<tr class="vis2" style="display:none">
<td>asdfaefas</td>
<td>1asdf</td>
<td>Cisdfae</td>
<td>22fasdew</td>
</tr>
<tr class="vis2" style="display:none">
<td>asdfaef</td>
<td>1sefa0</td>
<td>Ciasdf 2</td>
<td></td>
</tr>
</table>
</body>
</html>
You could try building a selector like this:
$('tr[class^="vis"]')
it would select all elements, which class attributes begins with 'vis'.
But from what I see you want the first row to always stay visible, so I would propose to simply separate the table header and it's body like this:
<table>
<thead><tr>...</tr></thead>
<tbody id="table-one" class="vis">
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
<table>
<thead><tr>...</tr></thead>
<tbody id="table-two" class="vis">
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
and then you could use a simple:
$('tbody.vis').toggle();
to toggle all the tables, and for toggle`ing just one of them you can use:
$('tbody#tbody-one').toggle();
which is probably much better idea for performance reasons (ID is found much faster than classes).
The ID attribute of TBODY can be stored just like you store it right now (in a button's attribute).
Fiddle example:
http://jsfiddle.net/SL4UZ/3/
Edit
To make your HTML valid, you should use data-attributes or bind your events using javascript instead of simply adding customs attributes inside your button tags. For example:
<button data-toggle-id="tbody-one">Toggle</button>
I updated my fiddle.
You can check the attr that needs to be toggled and if it matches all open 1 and 2, this works if your table is not dynamic
Expand all
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
if($(this).attr('vistoggle') == "all"){
$('.vis1').toggle();
$('.vis2').toggle();
}else{
$('.vis'+$(this).attr('vistoggle')).toggle();
}
});
});
Fiddle : http://jsfiddle.net/6hpbq/
Separate your classes eg vis1 becomes vis one (two classes) Then do a conditional check on the value of the data attribute. If its set to all, toggle all elements with the class vis, else toggle the specific ones:
<script>
$(document).ready(function(){
$(".toggler").click(function(e){
e.preventDefault();
var vistog = $(this).attr('vistoggle');
if(vistog == 'all'){
$('.vis').toggle();
}else{
$('.vis.' + vistog).toggle();
}
});
});
</script>
</head>
<body>
Expand all <!--vistoggle set to all -->
<table>
<tr>
<td>safeaef</td>
<td>asdfaef</td>
<td>asfead</td>
<td>Expand</td>
</tr>
<tr class="vis one" style="display:none">
<td>asdfae</td>
<td>zxcvry</td>
<td>rteyertr</td>
<td></td>
</tr>
<tr class='vis one' style='display:none'>
<td>tsersg</td>
<td>sdgfs</td>
<td>wregssdf</td>
<td></td>
</tr>
<tr class="vis one" style="display:none">
<td>sdfgrs</td>
<td>sgdfgsr</td>
<td>Cewret</td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>cfasdfas</td>
<td>1adfaed</td>
<td>asdfasdfea</td>
<td>Expand</td>
</tr>
<tr class="vis two" style="display:none">
<td>asdfaefas</td>
<td>1asdf</td>
<td>Cisdfae</td>
<td>22fasdew</td>
</tr>
<tr class="vis two" style="display:none">
<td>asdfaef</td>
<td>1sefa0</td>
<td>Ciasdf 2</td>
<td></td>
</tr>
</table>
</body>
</html>
I have a page with three rows of main information that all have a 'More Info' button attached, sort of like wefollow.com and their info button.
When the 'More Info' link is clicked a <tr> with a class of "mi" slides down above the main info.
The problem that I am getting is hiding the <tr> before the 'More Info' link is clicked. There is just a blank space where the <tr> is. The info in the <tr> is being hidden with jQuery (script below) and then displays when 'More Info' is clicked.
I tried hiding the "mi" with CSS but when the 'More Info' button is clicked, nothing happens.
Any help would be awesome. Thanks.
Scripts
index
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td>
<div id="1" class="more-information" />
</td>
</tr>
<tr class="">
<td> </td>
<td> </td>
<td> <a id="1" class="more-info" href="#">More info</a> </td>
</tbody>
</table>
listing.js
$(function(){
$(".more-information").hide();
$(".more-info").click(function () {
var divname= this.id;
$("#"+divname).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
return false;
});
First problem is you're repeating IDs. They need to be unique. That's no doubt throwing off your code.
<table>
<tbody>
<tr id="info-1"> </tr>
<tr class="mi">
<td><div id="more-1" class="more-information">More information</div></td>
</tr>
<tr>
<td></td>
<td></td>
<td><a id="1" class="more-info" href="#">More info</a></td>
</tr>
</tbody>
</table>
combined with:
$(function() {
$("a.more-info").click(function() {
$("#more-" + this.id).load("getinfo.php").slideToggle("slow").siblings().hide("slow");
});
});
Not sure why you need to hide siblings in the above though.
Also, I wouldn't hide the "more-information" divs in jquery. Just add CSS for that:
div.more-information { display: none; }
You are hiding the more-information div but you are not hiding its parent element, the <tr> with class mi. Try putting the id attribute in the <tr> instead of the enclosed div, and hiding the whole row. Also, you'll have to take cletus' advice about not repeating id's and unnecessary sibling hiding.