Develop Reference

Get value of td table using hierarchy css (without id/classes) with javascript

I'm trying get the value of td value usgin hierarchy css with javascript.
This is my code:
This code returns the value of first td when I click in element, but my alert is undefined.
How I can solve it?
var ee = $(".table tr td:nth-child(1)").attr('value');
$(".table").on('click', function (e) {
e.preventDefault();
alert(ee);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>

<td> do not have values, that's why:
var ee = $(".table tr td:nth-child(1)").text();
$(".table").on('click', function (e) {
e.preventDefault();
alert(ee);
});
Your click event is fine. You're just grabbing an undefined item, hence why the alert is acting how it is. You need to grab <td>--this--</td>
Helpful Advice:
This isn't going to give you the text of the 1st <td>, since that's not how nth child works with this. If you want that, try this as a selector:
var ee = $(".table tr td:eq(0)").text();
0 would be the first, 1 is second, 2 is third, etc.
You can also drop the e.preventDefault() and e in the function heading. A table has no default action unlike a form or button.

use
var ee = $(".table tr td:nth-child(1)").html();
instead of
var ee = $(".table tr td:nth-child(1)").attr('value');
First one would refer to a value property on the tag, like an input one. eg : <input type="radio" name="field" value="1" >

Same button for 2 tables selection jquery

i have a page and i got 2 tables in that page. I want to pass the value from rows to one .php page but with the same button. My code is this:
JS code:
var flag;
function highlight(e) {
if (selected[0]){
selected[0].className = '';
flag='1';
}
else if (selected2[0]){
selected2[0].className = '';
flag='0';
}
e.target.parentNode.className = 'selected';
alert(flag);
}
var table = document.getElementById('data-table'),
selected = table.getElementsByClassName('selected');
var table2 = document.getElementById('data-table-aux'),
selected2 = table2.getElementsByClassName('selected');
table.onclick = highlight;
table2.onclick=highlight;
$("#tst").click(function(){
if(flag=='1'){
var value =$(".selected td:first").html();
value = value || "Nenhuma coluna selecionada";
window.open("info_detalhada.php? data2="+value,'_blank','toolbar=0,location=no,menubar=0,height=550,width=650,lef t=200, top=300'); }
else if(flag=='0'){
var value =$(".selected td:first").html();
value = value || "Nenhuma coluna selecionada";
window.open("info_detalhada2.php? data2="+value,'_blank','toolbar=0,location=no,menubar=0,height=550,width=650,lef t=200, top=300');
}
});
HTML CODE
creating 2 tables
<table style="float: left" id="data-table"></table>
<table style="float: left" id="data-table-aux"></table>
(Dynamic tables )
button:
<input type="button" id="tst" value="Detailed information" />
The problem is that first time i select a row the variable flag will have the old value and not the new value from click.
For example, first time i click a row flag = undefined , second time got the value of the table selected (0 or 1) , if i click on other row the flag wont change and will got the old value (or 0 or 1).
Any tips ?
Thanks
edited: i didnt put the html in first place because i dont think it's an html solution, I dont have a fiddle created because i'm using dynamic table's but i will try to make a fiddle with my example and i will put here when it's done ;)
Fiddle : https://jsfiddle.net/gwg639Lf/9/

Let me suggest a more generic approach
First of all wrap your tables in a div
<div class="data-tables">
<table style="float: left" id="data-table"></table>
<table style="float: left" id="data-table-aux"></table>
</div>
Then delegate the click event handlers
$('.data-tables').delegate('table', 'click', function(event) {
$this = $(this)
$this.addClass('active').removeClass('inactive')
$this.siblings().addClass('inactive').removeClass('active')
});
This function does the following:
Add class active and remove inactive (if exists) to the selected item/table
Remove the class active and add class inactive from all adjacent tables
In this way you will only have one active table at the time
Then declare your button handler
$("#tst").click(function(){
var value = $('.active').html()
// Use the value as you want
})
This code will work no matter how many tables you add to the div

You're setting the class name of the element after the condition statement. Hence, the first time, your flag variable is undefined.
Try putting it in the beginning of the highlight function.
function highlight(e) {
e.target.parentNode.className = 'selected';
if (selected[0]){
selected[0].className = '';
flag='1';
}
else if (selected2[0]){
selected2[0].className = '';
flag='0';
}
alert(flag);
}
JsFiddle: https://jsfiddle.net/gwg639Lf/10/
Edit:
Add it before and after the condition. Adding it before the condition gives you the class name to initialize the flag variable. Adding it after gives the formatting bar.
JsFiddle: https://jsfiddle.net/gwg639Lf/13/

Ok, after some tests on Kostas Pelelis functions, i found a solution that is valid for my problem.
here is the code of JS:
var flag;
$("#data-table tr").click(function(){
$("#data-table-aux tr").addClass('selected').siblings().removeClass('selected');
$(this).addClass('selected').siblings().removeClass('selected');
flag='1';
});
$("#data-table-aux tr").click(function(){
$("#data-table tr").addClass('selected').siblings().removeClass('selected');
$(this).addClass('selected').siblings().removeClass('selected');
flag='0';
});
$('#tst').on('click', function(e){
if (flag=='1')
alert($("#data-table tr.selected td:first").html());
else if (flag=='0')
alert($("#data-table-aux tr.selected td:first").html());
});
Here is the fiddle --> fiddle
Thank you all for the help ;)

How to get a first cell from a row that user hovers over?

How to get a first cell from a row that user hovers over and then clicks certain key combination?(i am thinking about using jQuery)
I have a table that is similar to that one. When user places mouse over any of tr's and press ctrl+c he gets the ID copied to his clipboard.
Thank you!
UPD.Code that worked bellow.
<table>
<tr>
<td>ID</td>
<td>Text1</td>
<td>Text2</td>
<td>Text3</td>
</tr>
<tr>
<td id="my_id">1</td>
<td>Example1</td>
<td>Example1</td>
<td>Example1</td>
</tr>
<tr>
<td id="my_id">2</td>
<td>Example2</td>
<td>Example2</td>
<td>Example2</td>
</tr>
<tr>
<td id="my_id">3</td>
<td>Example3</td>
<td>Example3</td>
<td>Example3</td>
</tr>
</table>
$(document).ready(function()
{
var ctrlDown = false;
var ctrlKey = 17, cKey = 67;
var id = "";
$(document).keydown(function(e) {
if (e.keyCode == ctrlKey) ctrlDown = true;
});
$("tr").mouseover(function(){
id = $(this).find("#my_id").html();
});
$("tr").mouseout(function(){
id = "";
});
$(document).keydown(function(e)
{
if (ctrlDown && e.keyCode == cKey) {
if (id != "") {
window.prompt("Copy to clipboard: Ctrl+C, Enter", id);
ctrlDown = false;
}
}
});
});

Welcome to Stackoverflow. First of all, please read the guidelines on how to ask a question.
Key of this guideline is:
stackoverflow members won't do your work, but they'll help you, if you are stuck with a problem. To help you, we would need a 'What have I done so far' passage inside your question.
Now to your problem.
Do you know jquery? and how the selectors work? here the steps for your what have I done passage:
The table row selector $("table tr") (but I'd suggest working with classes and id's)
The jquery hover function
The selector to get the first cell:
$("> td:first", this)
The jquery function to get the content of the first td.
The clipboard problem, already discussed here.

You can get the cell value in different ways. Below is the simple script that does that.
JSFIDDLE: http://jsfiddle.net/kiranvarthi/cr399ww2/ (click to see value alert)
$( "table tr" ).click(function() {
alert($(this).children('td').first().html());
});
Once you get the ID, you can just add to clip board. Below link help to do that.
How do I copy to the clipboard in JavaScript?

Javascript/Jquery: Cannot target Sibling Node in Table

I have a function that hides/shows a table by clicking on it's header which is contained in a <thead> tag. When clicked the table hides and all that is left is the header, which, by clicking again, can un-hide the table.
I have multiple tables and would like to only have to use on function, instead of writing one for each table. To do this I am trying to pass the arguments (this,this.lastSibling). For some reason this.lastSibling is not targeting any object. I've tried every way of navigating the node tree I can think of, but I cannot target the tbody.
My Javascript/Jquery
function ToggleTable(trigger,target){
$(trigger).click(function(){
$(target).toggle();
ToggleTable(trigger,target)
});
}
My HTML
<table class="format2" >
<thead onmouseover="ToggleTable(this,this.lastSibling)">
<!--Title-->
</thead>
<tbody>
<!--Cells with information in here-->
</tbody>
<!--Note No TFooter Tag-->
</table>
<--Other tables similar to the one above-->
Thanks in advance!

I have a function that hides/shows a table by clicking on it's header which is contained in a <thead> tag. When clicked the table hides and all that is left is the header, which, by clicking again, can un-hide the table.
I'm lost in your current code. But If you want to toggle the visibility of the tbody (or the last child element in your <table> tag you could try this.
function ready() {
$('table > thead')
.each(function(e){
$(this).siblings(':last').hide();
})
.click(function(e) {
$(this).siblings(':last').toggle();
});
}
$(ready);
Live sample: http://bl.ocks.org/3078240

If you would like to try a solution that utilizes core JavaScript instead of jQuery shims, this might work for you. It's a function I quickly wrote that returns the last sibling that is an HTML element (e.g. not a text node) although you should be able to easily modify it to accept any node in the DOM:
function getLastSibling(el) {
var siblings, x, sib;
siblings = el.parentNode.children;
x = siblings.length;
while ((sib = siblings[x - 1]) && x >= 0) {
console.log(sib);
console.log(sib.nodeType);
if (sib.nodeType != 1 || sib.tagName == 'SCRIPT') {
x--;
} else {
return sib;
}
}
return null;
}

Assuming all your tables will have the class format2 .
Try this:
$("table.format2 > thead").click(function(){
$(this).next("tbody").toggle();
});
JSFiddle: http://jsfiddle.net/KcY4X/

disable click event on first column

Can someone help me how to disable the click event on first column and the other columns should be clickable. I have tried several different ways like slice
td.slice() after tr element and also td:gt(0)
etc and was unsuccessful. I had been banging my head since 2 days and I didn't find any relevant solutions out on google.
$('#Table tbody tr').on("click",function(){
var aPos Table.fnGetPosition(this);
var aData = Table.fnGetData( aPos[6] );
//aData = $(this).parent().parent().html();
xyz = $(this).parent().parent().find("td").eq(1).html();
yzx= $(this).parent().parent().find("td").eq(7).html();
zxy= $(this).parent().parent().find("td").eq(2).html();
alert(aPos);
});

Try stopPropogation on first column click DEMO
Edit: Added demo and fixed .find('td:first')
$('#Table tr').find('td:first').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
});

add some kind of unique identifier on the first column and
$('identifier').click(function(){
return false;
});
I think you can also target first column with the n-th child thing but I am not sure of the exact syntax. Maybe something like
$('table tr td:(nth-child(1)').on('click', function(){
return false;
});
or something like the above, hope it helps

You need to add some kind of identifier to the columns you want to use:
<tr>
<td class="dontClickMe"></td>
<td class="clickMe"></td>
</tr>
Then it's as simple as:
$('.clickMe').on('click', function() { ... });