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);
})
Related
I'm stuck with a problem. I currently have a simple <table> that looks like this:
<table class="table">
<tbody>
<tr id="kc_keychain_1">
<td class="td-kc-id"> kc_keychain_1 </td>
<td class="td-kc-name"> Keychain 1 </td>
<td>
<p>my key</p>
<p>my second key</p>
</td>
</tr>
<tr id="kc_keychain_10">
<td class="td-kc-id"> kc_keychain_10 </td>
<td class="td-kc-name"> Keychain 10</td>
<td>
<p>ma clé</p>
<p>Clé 005V</p>
</td>
</tr>
</tbody>
</table>
I also have some JavaScript code, that aims at cloning a specific row, modifying the .tc-kc-id and .tc-kc-name cells of the cloned row, and finally adding the cloned and modified row to the table:
var clonedTr = document.querySelector('#' + id).cloneNode(true);
//$(clonedTr).find(".td-kc-id").innerText = "test";
//$(clonedTr).find(".td-kc-name").innerText = "test";
document.querySelector('tbody').appendChild(clonedTr);
It clones and adds the cloned row without any problem. But the commented code doesn't work. What I try in the commented code is to get specific cells thanks to their classname, and then change their innerText property.
But the innerText of the cells remain unchanged. Can anyone help me? Thanks
Thanks to #ChrisG, a possible working solution is:
$(clonedTr).find(".td-kc-id").text("test");
HTML
<table>
<tr id="1">
<td id="a">aa</td>
<td>bb</td>
</tr>
</table>
JavaScript
document.getElementById("1").children[1].innerHTML="newB" // it works as expected.
document.getElementById("a").nextSibling.innerHTML="newB" // it does not work.
How can I change td id="a" sibling value using 2nd approach?
Use nextElementSibling
document.getElementById("a").nextElementSibling.innerHTML = "newB";
nextSibling will select the empty textNode as you can see in the following demo
console.log(document.getElementById("a").nextSibling);
<table>
<tr id="1">
<td id="a">aa</td>
<td>bb</td>
</tr>
</table>
You can see that nextSibling will work as expected when you have no space between the elements. So, it'll not select the empty textNode.
document.getElementById("a").nextSibling.innerHTML = "newB";
<table>
<tr id="1">
<td id="a">aa</td><td>bb</td> <!-- No space, it works! -->
</tr>
</table>
It is because, the next sibling of the td could be a text node, you need the next element sibling.
You can use the nextElementSibling property
document.getElementById("a").nextElementSibling.innerHTML = "newB";
<table>
<tr id="1">
<td id="a">aa</td>
<td>bb</td>
</tr>
</table>
Note: supported in IE 9+
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 currently utilized this method Linethrough/strikethrough a whole HTML table row and it works great.
However how do I attach it to a HTML check box onclick method?
http://jsfiddle.net/deaconf19/DrEhv/
<table border 1>
<tr>
<td>Status</td>
<td>Priority</td>
<td>Date</td>
<td>Event</td>
<td>Updated</td>
</tr>
<tr>
<td contenteditable/>Checkbox</td>
<td contenteditable/>3</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating again</td>
<td contenteditable/>02/07/2014</td>
</tr>
<tr class="strikeout">
<td contenteditable/>Checkbox</td>
<td contenteditable/>1</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating</td>
<td contenteditable/>02/07/2014</td>
</tr>
</table>
You can use jQuery, to find check box parents parent and add a class to it when status of checkbox changed
if ( this.checked) {
$(this).parent().parent().addClass("strikeout");
} else {
$(this).parent().parent().removeClass("strikeout");
}
Example
Just use javascript to change the table class. If using jQuery:
$('#myCheckbox').change(function(){
$('#myTableRow').toggleClass('strikeout', $(this).prop('checked'));
})
The text below assumes that you have a checkbox with id="myCheckbox" and a table row with id="myTableRow".
Why use jQuery if pure JS can do the same thing:
In your HTML, add onclick handler for checkboxes:
<input type="checkbox" onclick="strike(this)">
Then change class of TR element based on checkbox value, like this:
function strike(elm) {
if(elm.checked) {
elm.parentNode.parentNode.className = "strikeout";
} else {
elm.parentNode.parentNode.className = "";
}
}
As simple as that !
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>