click event in the table

cDBtable/cDBtable.js

@@ -18,7 +18,7 @@
       var loading = false;
       var page = 0;
       var defaults;
-      var total = 10000;
+      var total = 5000;
 
       var methods = {
         init : function(options) {
@@ -30,7 +30,7 @@
               getDataUrl: 'http://bioblitz.tdwg.org/api/taxonomy',  
               style: "cDBtable.css",
               paginateParam: "page",
-              resultsPerPage: 30
+              resultsPerPage: 5000
             };
             
             table = $(this)[0];
@@ -74,7 +74,7 @@
             methods.addScroll();
             
             //Cell click event
-            //methods.bindCellEvent();
+            methods.bindCellEvent();
             
           }
           
@@ -126,28 +126,22 @@
         },
         
         bindCellEvent: function() {
-          document.ondblclick = function(event) {
+          $(document).click(function(event){
+            var target = event.target || event.srcElement;
+            var targetElement = target.nodeName.toLowerCase();
 
-              //Cross-browser event object
-              event = event || window.event;
-              //Cross-browser event target
-              var target = event.target || event.srcElement;
-              //Get target element type
-              var targetElement = target.nodeName.toLowerCase();
-
-              //Is it a link?
-              if (targetElement == "td") {
-                alert("td");
-                //alert(targetElement.getAttribute('r'));
-              }
+            if (targetElement == "div") {
+              alert($(target).parent().attr('c')+'-'+$(target).parent().attr('r')+'-'+$(target).parent().text());
+            }
 
-              //Cross-browser prevent default action
-              if (event.preventDefault) {
-                event.preventDefault();
-              } else {
-                event.returnValue = false;
-              }
-            };
+            if (event.preventDefault) {
+              event.preventDefault();
+              event.stopPropagation();
+            } else {
+              event.stopPropagation();
+              event.returnValue = false;
+            }
+          });
         }
       };
 

stylesheets/table.css

@@ -50,11 +50,11 @@ div.table_position table thead tr th a {position:absolute; right:10px; top:10px;
 div.table_position table thead tr th a:hover {background-position:0 -14px;}
 div.table_position table tbody {}
 div.table_position table tbody tr {height:39px;}
-div.table_position table tbody tr td {height:13px!important; width:100px!important; padding:13px; background-color:#f0f1f5; background:-moz-linear-gradient(100% 100% 90deg, #f9fafe, #f0f1f5); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9fafe), to(#f0f1f5));
+div.table_position table tbody tr td {height:13px!important; background-color:#f0f1f5; background:-moz-linear-gradient(100% 100% 90deg, #f9fafe, #f0f1f5); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9fafe), to(#f0f1f5));
   border:1px solid #E4E5E9; border-top:none; font:normal 13px "Helvetica"; line-height:13px; color:#666666; text-shadow:0 1px white; -moz-box-shadow:inset 1px 1px 0 white; -webkit-box-shadow:inset 1px 1px 0 white;}
 div.table_position table tbody tr td:hover {cursor:pointer;}
 div.table_position table tbody tr:hover td {background: -moz-linear-gradient(100% 100% 90deg, #edf9ef, #e4F0E1); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#edf9ef), to(#e4F0E1));}
-div.table_position table tbody tr td div {width:100px; overflow:hidden; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
+div.table_position table tbody tr td div {width:100px; padding:13px; overflow:hidden; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; -webkit-user-select:none; -moz-user-select:none;}
 
 div.table_position div.loading_more {position:relative; display:none; float:left; width:100%; height:45px; padding:45px 0 0; margin:1px 0 0 0; background: -moz-linear-gradient(100% 100% 90deg, #DCDDE0, #FEFEFE); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DCDDE0), to(#FEFEFE));}
 div.table_position div.loading_more p {width:100%; text-align:center; font:bold 13px "Helvetica"; color:#666666;}