clickable-tr v1.0.0

clickable-tr-jquery

Usage

1. Include jQuery:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

2. Include plugin's code:

   <script src="jquery-clickable-tr.js"></script>

3. HTML structure

   <table class="clickable-table">
     <thead>
       <tr>
         <th>Column A</th>
         <th>Column B</th>
       </tr>
     </thead>
     <tbody>
       <tr data-href="http://google.de" data-event="eventName">
         <td>Data A</td>
         <td><a href="http://www.deoldsax.de">DeOldSax</a></td>
       </tr>
       <tr data-event="testEvent">
         <td>Data C</td>
         <td><a href="https://github.com/DeOldSax">github @deoldsax<a/></td>
       </tr>
       <tr data-href="https://github.com/" data-event="eventA" data-remote="false">
         <td class="disable-row-click">Data A</td>
         <td>Data B</td>
       </tr>
       <tr data-href="http://api.jquery.com/">
         <td>Data A</td>
         <td>Data B</td>
       </tr>
     </tbody>
   </table>

4. Call the plugin:

• default

  $(document).ready(function() {
    $('.clickable-table').clickableTable();
  });

• with callback

  $(document).ready(function() {
    $('.clickable-table').clickableTable({
      eventName : callback
    });
  });
  
  function callback(e) {
    console.log(e);
  }
  
  function testEvent(e) {
    console.log(e);
  }

5. How to exclude nested elements from click event?

• <a></a> and <button></button> inside <td></td> are excluded by default
• add disable-row-click to <td class="disable-row-click"></td> to exclude whole <td></td>