Select Single Or Multiple Table Rows With Click - jQuery tableSelection.js

An ultra-light (less than 1kb) jQuery table selection plugin which enables the user to select single or multiple rows in an HTML table using mouse click and touch tap.

How to use it:

1. Insert the minified version of the jQuery tableSelection plugin after jQuery library.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="tableSelection.js"></script>

2. Attach the plugin to your HTML table and done.

<table class="table" id="myTable">
  ...
</table>

$(function() {
  $('#myTable').TableSelection();
});

3. Enable the multi selection on the HTML table. Default: single.

$('#myTable').TableSelection({
  status: 'multiple'
});

4. Return an array of selected rows.

$('#myTable').TableSelection({
  status: 'multiple'
}, function(obj){
  $rows = obj.rows;
});

5. Sort the selected rows alphabetically. Default: true.

$('#myTable').TableSelection({
  sort: true
});

6. Show the selected rows in an HTML list.

<button onclick="showSelectedRow($rows);">Show The Results</button>
<ul id="info">
</ul>

function showSelectedRow(array){
  $('#info').empty();
  $.each(array, function(i, row){
    $('#info').append('<li>'
      + $('#tableSelected').RowValue(row).find('td').eq(2).html() // HTML Object
      + '</li>');
  });
}

---

This awesome jQuery plugin is developed by jounger. For more Advanced Usages, please check the demo page or visit the official website.