I need to create a function that outputs only the id of any image whenever the user click on it. (Javascript or jQuery it doesn't matter)
<table>
<tr>
<td id="1"><img src="image1.gif"></td>
<td id="2"><img src="image1.gif"</td>
<td id="3"><img src="image1.gif"</td>
</tr>
</table>
Add a class to your table:
<table class="tblImages">
<tr>
<td id="1"><img src="image1.gif"></td>
<td id="2"><img src="image1.gif"</td>
<td id="3"><img src="image1.gif"</td>
</tr>
</table>
Then delegate the binding:
$('.tblImages').on('click', 'td', function(e){
var id = this.id; // here you go
});
Demo: http://jsfiddle.net/Uz2pW/
try this
$('td').on('click', function(){
alert($(this).attr('id'));
});
LIVE DEMO
If you are looking for printing the data cell id wrapping the image, then one option is to attach an id for each image that would enable you to retrieve its parent node from javascript. It would look like this:
<html>
<head>
<script>
function say_id(some_id) {
alert(document.getElementById(some_id).parentNode.id);
}
</script>
</head>
<body>
<table>
<tr>
<td id="1"><img id="img-1" src="Tulips.jpg" onclick="say_id(this.id)"/></td>
<td id="2"><img id="img-2" src="Tulips.jpg" onclick="say_id(this.id)"/></td>
<td id="3"><img id="img-3" src="Tulips.jpg" onclick="say_id(this.id)"/></td>
</tr>
</table>
</body>
</html>
Try this:
$("td img").on("click", function() {
var id = $(this).closest("td").attr("id");
// do as you want with id
});
None of your images have id's, but you can get the id of the table cell:
$('image').click(function(){
var parentID = $(this).closest('td').id;
console.log(parentID);
});
Related
I have a form like below
form name="myform" id="myform">
<table>
<tr role="row" class="odd selected">
<td class="ng-scope sorting_1">1</td>
<td class="ng-scope">.NET</td>
<td class="ng-scope">Intermediate</td>
<td class="ng-scope">0</td><td class="ng-scope">true</td>
</tr>
</table>
</form>
using the form id is there anyway to get the table object inside this form ?
i have tried the below way,that way i can get all the inputs inside the form but i couldn't get the table object
$("form#myform:input").each(function(){
var input = $(this);
});
can anyone suggest a way to do the same.
I'm not sure what you want to do with the table, but you can access it using the following selector:
var yourTable = $("#myform table");
The selector is looking for table element inside element with ID myform.
If you want to get the row selector (as you mentioned in comments), then you can use add selector for tr:
$("#myform table tr").each(function(){
var currentRow = $(this);
// do what you need with current row
});
I think this is what you want
HTML
<form id="myform">
<table>
<tr role="row" class="odd selected">
<td class="ng-scope sorting_1">1</td>
<td class="ng-scope">.NET</td>
<td class="ng-scope">Intermediate</td>
<td class="ng-scope">0</td><td class="ng-scope">true</td>
</tr>
</table>
</form>
<table class="dest-table">
<tr role="row" class="odd selected">
<td class="ng-scope sorting_1">1</td>
<td class="ng-scope">a</td>
<td class="ng-scope">b</td>
<td class="ng-scope">c<td class="ng-scope">d</td>
</tr>
</table>
JS
$(document).ready(function() {
$("#myform tr").on("click", function(event) {
$(".dest-table tr").html($(event.currentTarget).html());
})
})
Fiddle
https://jsfiddle.net/ja454mfx/1/
What about this :
$("form#myform>table").each(function(){
var table = $(this);
});
You use ">" to access the direct descendant which is a table.
EDIT:
$("form#myform>table>tr").each(function(){
var trInner = $(this).html();
});
I don't know if I can explain this right...
I have a table like this:
<table>
<tr>
<td class="myTD">aaa</td>
<td class="myTD">bbb</td>
<td class="myTD">ccc</td>
<td class="myTD">ddd</td>
<td class="myTD">eee</td>
</tr>
</table>
Some jquery like this:
$('.myTD').on('click', function(e){
//... do some here ...//
});
when I click on a TD I want the node count of the clicked td.
E.g. if I click on ccc I want to alert 3
Is this possible in some way or do I have to explizit add an ID ?
$('.myTD').on('click', function(){
alert( $(this).index() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="myTD">aaa</td>
<td class="myTD">bbb</td>
<td class="myTD">ccc</td>
<td class="myTD">ddd</td>
<td class="myTD">eee</td>
</tr>
</table>
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>
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>