Simple Table Test

Making a table row act like a hyperlink

by deanpeters

HTML

<h2>Open your Inspector Console to see Important messages</h2>

<table>
  <tr id="MyDataGrid_row1" ap_cix="foo">
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>phone</th>
    <th>email</th>
  </tr>
  <tr id="MyDataGrid_row2" ap_cix="bar">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>919-555-1212</td>
    <td><a href="mailto:[email protected]">email</a></td>
    
  </tr>
  <tr id="MyDataGrid_row3">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td>044 55 1234 5678</td>
    <td><a href="mailto:[email protected]">email</a></td>
  </tr>
  <tr id="MyDataGrid_row4">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td>61 (02) 7010 1111</td>
    <td><a href="mailto:[email protected]">email</a></td>
  </tr>
  <tr id="MyDataGrid_row5">
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td>+44 7911 123456</td>
    <td><a href="mailto:[email protected]">email</a></td>
  </tr>
  <tr id="MyDataGrid_row6">
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td>1-418-555-8626</td>
    <td><a href="mailto:[email protected]">email</a></td>
  </tr>
  <tr id="MyDataGrid_row7">
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td>+39 06 69855555</td>
    <td><a href="mailto:[email protected]">email</a></td>
  </tr>
</table>

CSS

h2 {
  font-size: 1.15em;
}

table {
    font-family: arial, sans-serif;
    font-size: .75em;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

JavaScript

/* 
	if a picture is worth 1,000 words
  then I'm hoping this snippet saves 10,000
  in the course of a conversation about
  the DOM and link button treatments
 */


$(document).ready(function(){ 
  document.oncontextmenu = function() {return false;};

	/* on the <td> click, set the <tr data=""/> attribute */
  $("[id^=MyDataGrid_] > td").mousedown(function(e){ 
    if( e.button == 2 ) { 
			$(this).parent().attr('ap_cix', $(this).context.cellIndex);
     } else if( e.button == 1 && e.buttons == 4 ) { 
			$(this).parent().attr('ap_cix', $(this).context.cellIndex);
    } else {
			$(this).parent().attr('ap_cix', -1);
    }
    return true; 
  }); 


/* 
  Capture the row click (via a DOM bubble-up) ...
	that is, when the cell click bubbles up, to the row
  we interpret it, making sure not to open
  a new tab on certain column (or column attributes)
*/
  $("[id^=MyDataGrid_]").mousedown(function(e){ 
    if( e.button == 2 ) { 
      console.log('Right mouse button!', $(this).attr('ap_cix')); 
      return false; 
     } else if( e.button == 1 && e.buttons == 4 ) { 
      console.log('Center wheel click!', $(this).attr('ap_cix')); 
      if($(this).attr('ap_cix') != 4) {
	      window.open('https://stackoverflow.com/q/4907843', 'New Tab');    
	      return false; 
      } else {
      	console.log("You have mail!", $(this).find('a').attr('href'))
      }
    } else {
			console.log('Other', e)    
    }
    return true; 
  }); 
});