Topic: Click on a line of the table

There is a table with 2-columns: a column with the code of color and a column with digit corresponding to the code. It is necessary at click on the arbitrary line to produce "on mountain" background color of a cell from 1st column, and in an ideal - also appropriate digit from-2nd a column.
At random found out that the word this in the code of handling of click almost is ideally suited for me - as this word returns the link to a line of the table (other links - on cells, the text in them, etc. - do not approach as hit in them a mouse depends on a case). And here further - full : it does not turn out to coordinate in any way the clicked line to color of its 1st cell or with digit of its 2nd cell. All time is produced undefined though burst sad Tried in an any way - both through css, and through attrib, and even through prop - result one sad
More shortly - here such code of the table:

<table cols = "2" cellpadding = "3" cellspacing = "1">
<tr id = "tr0"> <td colspan = "2"> <img src = "IMG/Ukaz1.png" width = "10 %"> </td> </tr>
<tr id = "tr1" class = "tr_nominal"> <td class = "td1" bgcolor = "#000000"> <font color = "#ffffff"> Black </font> </td> <td class = "td2"> 0 </td> </tr>
<tr id = "tr2" class = "tr_nominal"> <td class = "td1" bgcolor = "#C04F00"> <font color = "#ffffff"> Brown </font> </td> <td class = "td2"> 1 </td> </tr>
<tr id = "tr3" class = "tr_nominal"> <td class = "td1" bgcolor = "#FF0000"> <font color = "#ffffff"> Red </font> </td> <td class = "td2"> 2 </td> </tr>
<tr id = "tr4" class = "tr_nominal"> <td class = "td1" bgcolor = "#FE9900"> <font color = "#000000"> Orange </font> </td> <td class = "td2"> 3 </td> </tr>
<tr id = "tr5" class = "tr_nominal"> <td class = "td1" bgcolor = "#FFFF00"> <font color = "#000000"> Yellow </font> </td> <td class = "td2"> 4 </td> </tr>
<tr id = "tr6" class = "tr_nominal"> <td class = "td1" bgcolor = "#00D400"> <font color = "#000000"> Green </font> </td> <td class = "td2"> 5 </td> </tr>
<tr id = "tr7" class = "tr_nominal"> <td class = "td1" bgcolor = "#0000FF"> <font color = "#FFFFFF"> Dark blue </font> </td> <td class = "td2"> 6 </td> </tr>
<tr id = "tr8" class = "tr_nominal"> <td class = "td1" bgcolor = "#A608D9"> <font color = "#FFFFFF"> Violet </font> </td> <td class = "td2"> 7 </td> </tr>
<tr id = "tr9" class = "tr_nominal"> <td class = "td1" bgcolor = "#8C9497"> <font color = "#FFFFFF"> Grey </font> </td> <td class = "td2"> 8 </td> </tr>
<tr id = "tr10" class = "tr_nominal"> <td class = "td1" bgcolor = "#FFFFFF"> <font color = "#000000"> White </font> </td> <td class = "td2"> 9 </td> </tr>
<tr id = "tr11" class = "tr_nominal"> <td class = "td1" bgcolor = "#CCC5C2"> <font color = "#000000"> Silvery </font> </td> <td class = "td2">-1 </td> </tr>
<tr id = "tr12" class = "tr_nominal"> <td class = "td1" bgcolor = "#CC940C"> <font color = "#FFFFFF"> Golden </font> </td> <td class = "td2">-2 </td> </tr>

And here such variants of my JQ-perversions:

$('.tr_nominal ').on (' click ', function (e)
{e.preventDefault ();
alert (' Click an element with ' + $ (' this.td1 ').attr (' bgcolor '));
console.log ($ (' this.td1 ').css (' background-color '));
$(' #nominal ').hide (300);//It is containing table DIV, works normally
return false;

It would be desirable, that in a broad gull (or in ) background color of a cell, not to mention digit of 2nd cell was produced at least;
Does not quit in any way sad


Re: Click on a line of the table

To begin with not

$(' this.td1 ')


$('.td1 ', this)


Re: Click on a line of the table

Isokerf, thanks - I did not know about such syntax of reversal. And did not meet anything similar in Google. Perhaps badly looked? Well, yes it is fine - all the same thanks smile
At me  the Internet, therefore and a little that was possible , yes therefore could not brag at once - I solved a problem by means of other syntax:

vvv = $ (this).children ().eq (0).css (' background-color ');//reversal to a background of 1st cell
bbb = $ (this).children ().eq (1).text ();//reversal to the text of 2nd cell

And generally - already at a current stage of my learning JS/JQ attracts attention a huge difference between cheloveko-clear commands or keywords (this, children, next, etc.) and in abbreviated form-terse (eq, lt, etc.): such impression that design team JS/JQ consists of 2 different groups possessing very differing lexicon smile
If it is possible though somehow to guess and pick up syntax for cheloveko-clear words (especially if circumstances force, and Tyrnet wildly brakes), with terse interjections of type eq () - any guesses it do not help, they should be hacked simply... sad


Re: Click on a line of the table

Better so -

$(' table ').on (' click ', ' tr ', function (e) {
console.log ($ ('.td1 ', this).css (' background-color '), $ ('.td2 ', this).text ());

The output agent is hung up on the table (the selector naturally to replace on present), instead of on every line - at adding of lines of problems will not be;
Well and without dependence on an amount of columns and their order


Re: Click on a line of the table

neznajka wrote:


It not from jquery, it from javascript


Re: Click on a line of the table

Yes, the Isokerf, thanks it is indeed more convenient. Especially at possible scaling/complication of structure of the table.
And about ' this ' - such everywhere is. And not only in JS. But also in JQ as it is visible, too. Otherwise my code
$(this).children ()... Would not work smile
I, actually, about this guessed only by analogy with VisualFoxPro - superfluous experience does not happen, it appears smile
Simply I at first erraticly applied inverted commas around this - but only because in JQ-selectors they are applied everywhere to fanaticism. And here, in a case with this - there was an exception, and inverted commas just appeared are not necessary. In general, as in a monologue of one well-known humorist: "Here - we play, here - we do not play, and here - we wrapped fish..." smile
But I all the same like to comprehend this extremely tangled lump JS/JQ - that despair, continuous  smile
But - it is not boring smile


Re: Click on a line of the table

c this all the same understand at once, the mass of surprises differently waits


Re: Click on a line of the table

Isokerf, not that word! I already received some times this rake... smile
I am helped very much here by this a material . However, that site not always happens is accessible.


Re: Click on a line of the table

"JavaScript. A detailed manual" David Flenagan (6 issuing)
It is possible to study easy javascript and with the bad connection


Re: Click on a line of the table

The isokerf, yes, this book at me is in 3 formats - very much helps. And style of presentation where is better, than, for example, at "JQuery for professionals" Frimena.