StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<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 && 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" && 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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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