Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is a Javascript only solution for a static page, this attaches an event listener to the <code>tr</code> and intercepts the click events of its children. the contents of the <code>tr</code> can be dynamic.</p> <pre><code>Array.prototype.forEach.call(document.getElementsByTagName("table"), function (table) { Array.prototype.forEach.call(table.getElementsByTagName("tr"), function (tr) { tr.addEventListener("click", function (evt) { var children = this.children, length = children.length; if (length &amp;&amp; children[length - 1] === evt.target) { alert(children[0].firstChild.nodeValue); } }, false); }); }); </code></pre> <p>On <a href="http://jsfiddle.net/Xotic750/Ym9TH/" rel="nofollow">jsfiddle</a></p> <p>Which in jquery terms would be</p> <pre><code>$("table tr").on("click", function (evt) { var target = $(evt.target); if (target.parent().children().last().get(0) === evt.target) { alert(target.parent().children().first().text()); } }); </code></pre> <p>On <a href="http://jsfiddle.net/Xotic750/2AN59/" rel="nofollow">jsfiddle</a></p> <p>Or rather than set an event listener per <code>tr</code> element ("bubbling"), you could also use event "bubbling" and move it all the way out to <code>document</code> (what those at jquery call Event Delegation, <a href="http://api.jquery.com/on/" rel="nofollow">jquery.on</a>), this will allow for quite a dynamic system if you add and remove rows from your table, or even whole tables.</p> <pre><code>document.addEventListener("click", function (evt) { var target = evt.target; if (target.nodeName === "TD" &amp;&amp; target.parentNode.children[target.parentNode.children.length - 1] === target) { alert(target.parentNode.children[0].firstChild.nodeValue); } }, false); </code></pre> <p>On jsfid<a href="http://jsfiddle.net/Xotic750/2BS66/" rel="nofollow">d</a>le</p> <p>Or using jquery delegation</p> <pre><code>$(document).on("click", "td", function (evt) { var target = $(evt.target); if (target.parent().children().last().get(0) === evt.target) { alert(target.siblings().first().text()); } }); </code></pre> <p>On <a href="http://jsfiddle.net/Xotic750/2AN59/" rel="nofollow">jsfiddle</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload