How to make a entire row clickable and opening the text new tab using jquery

 Step1:

Welcome to designer dairy blog..  Here we are going to see how to make a entire row  as clickable and opening the text new tab window using jquery

Step2:

Table Structure

<table class="task-list table table-striped">
                                   <tbody>
                        <tr class="odd" role="row" data-href="task.html">
                          <td> To-do</td>
                          <td> Kick-Off Upload TFL - Kick-Off Meeting    </td>
                           <td>Kick-Off</td>
                          <td> Not Started</td>
                        <td>08-Jun-2016</td>
                
                        </tr>
                      
                      </tbody>
                    </table>

Step3:

 My requirements for the solution were:
1. The entire row should be linked without having to link each and every cell.
2. The html of the table should not be permanently altered by the script.
3. The right click context menu should work as if it was a normal link.
4. Control + click should result in the link being opened in a new tab/window, same as a normal link.
5. The target link should be possible to specify with a data attribute on the row, or by setting one of cells in the row.
6. The JavaScript should be unobtrusive and work with most browsers.

Step4:

<script>
jQuery(function () {

$('table tr td').on('mousedown', function (e) {
   
    clickableRowListener(this, e);
   
function clickableRowListener(that, e) {
   var c = $(that).html(), url = $(that).parent().data("href");

   if (url && c.indexOf("<a") == -1) {
       $(that).html("<a href='" + url + "' target='" + (e.ctrlKey || e.which === 2 ? "_blank" : "") + "'>" + c + "</a>");
       
  }
}
});

});
</script>

Step5:

Enjoy Folks