<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Table Row Selector with Shift Special Key</h2> <table class="table table-bordered table-condensed"> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr><td>0</td><td>Example</td></tr> <tr><td>1</td><td>Example</td></tr> <tr><td>2</td><td>Example</td></tr> <tr><td>3</td><td>Example</td></tr> <tr><td>4</td><td>Example</td></tr> <tr><td>5</td><td>Example</td></tr> <tr><td>6</td><td>Example</td></tr> <tr><td>7</td><td>Example</td></tr> <tr><td>8</td><td>Example</td></tr> <tr><td>9</td><td>Example</td></tr> <tr><td>10</td><td>Example</td></tr> <tr><td>11</td><td>Example</td></tr> <tr><td>12</td><td>Example</td></tr> <tr><td>13</td><td>Example</td></tr> <tr><td>14</td><td>Example</td></tr> <tr><td>15</td><td>Example</td></tr> <tr><td>16</td><td>Example</td></tr> <tr><td>17</td><td>Example</td></tr> <tr><td>18</td><td>Example</td></tr> <tr><td>19</td><td>Example</td></tr> </tbody> </table> </div> </div>

$(function(){ $('.table').on('click', 'tr', function(e){ var $tr = $(this); var $table = $tr.closest('.table'); var our_index = $($tr,$table).index(); if (e.shiftKey) { var last_index = $table.data('last-index'); if (last_index) { if (last_index < our_index) { while(last_index < our_index) { $('tbody tr:eq('+(++last_index)+')', $table).click(); } $('tbody tr:eq('+(last_index)+')', $table).click(); } else { while(last_index > our_index) { $('tbody tr:eq('+(--last_index)+')', $table).click(); } $('tbody tr:eq('+(last_index)+')', $table).click(); } } $table.data('last-index',our_index); } else { $table.data('last-index',our_index); } if ($tr.hasClass('success')) { $tr.removeClass('success'); } else { $tr.addClass('success'); } }); });