{"id":97,"date":"2005-05-18T16:01:14","date_gmt":"2005-05-18T14:01:14","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/05\/18\/detect-table-row-index-with-javascript\/"},"modified":"2016-09-30T16:27:01","modified_gmt":"2016-09-30T15:27:01","slug":"detect-table-row-index-with-javascript","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/05\/18\/detect-table-row-index-with-javascript\/","title":{"rendered":"Detect Table Row Index with JavaScript"},"content":{"rendered":"<p>Every once in a while, <a href=\"https:\/\/www.creativenights.com\/#results\">a project we work on<\/a> will require us to detect a table row in order to manipulate the data on the client-side, without having to reload the whole page. This is relatively easy to achieve using JavaScript and rowIndex; a useful JS method that\u2019s compatible with almost every browser.<\/p>\n<p>The <code>rowIndex<\/code> is a little known property, but nevertheless it\u2019s a useful JS method because <a href=\"http:\/\/www.quirksmode.org\/dom\/w3c_html.html#link4\">it is compatible with almost every browser<\/a>.<\/p>\n<p>Below is a <a href=\"http:\/\/webdesign.maratz.com\/lab\/row_index\/\">quick demo<\/a>. <!--more--><\/p>\n<pre><code>&#60;html>\r\n&#60;head>\r\n&#60;title>Row indexes&#60;\/title>\r\n&#60;script type=\"text\/javascript\">\r\nonload = function() {\r\n    if (!document.getElementsByTagName || !document.createTextNode) return;\r\n    var rows = document.getElementById('my_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr');\r\n    for (i = 0; i < rows.length; i++) {\r\n        rows[i].onclick = function() {\r\n            alert(this.rowIndex + 1);\r\n        }\r\n    }\r\n}\r\n&#60;\/script>\r\n&#60;\/head>\r\n&#60;body>\r\n&#60;table id=\"my_table\">\r\n&#60;tbody>\r\n    &#60;tr>&#60;td>first row&#60;\/td>&#60;\/tr>\r\n    &#60;tr>&#60;td>second row&#60;\/td>&#60;\/tr>\r\n&#60;\/tbody>\r\n&#60;\/table>\r\n&#60;\/body>\r\n&#60;\/html>\r\n<\/code><\/pre>\n<p>How do you like this? What is your typical use case? Feel free to leave a comment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every once in a while, a project we work on will require us to detect a table row in order to manipulate the data on the client-side, without having to reload the whole page. This is relatively easy to achieve using JavaScript and rowIndex; a useful JS method that\u2019s compatible with almost every browser. The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,18,11,17],"tags":[54,58,52],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/97"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":7,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":2801,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions\/2801"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}