HTML table selectable rows Javascript package [closed]

Question

Is there a Javascript package out there that makes table rows selectable/highlightable by clicking on them and using the Shift and Ctrl keys?

I'm looking for the same functionality as iTunes or some other music player that allows to highlight one song by clicking the row or highlighting multiple by holding shift or control and clicking.

Answer 1

You can do it without plugins!

This example highlights a row or multiple ones by holding Ctrl, cmd (for MacOS users) or Shift keyboard key and clicking.

I will suggest to avoid plugins for simple things. You will see that this is not a lot of code to implement for what you need to achieve.

Live demo: http://jsfiddle.net/oscarj24/ctLm8/2/

---

HTML:

Suppose I have the following table (you will interact with the rows).

<table border="1">
    <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>Salary</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Luis</td>
        <td>28</td>
        <td>$100,000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Oscar</td>
        <td>29</td>
        <td>$90,000</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Daniel</td>
        <td>18</td>
        <td>$50,000</td>
    </tr>
</table>

CSS:

Now I will create some CSS to use the default cursor when navigating the table (just for styling, you can remove it) and another one to highlight the row.

tr { cursor: default; }
.highlight { background: yellow; }

jQuery:

This is all the code you need, please read comments.

$(function() {

    /* Get all rows from your 'table' but not the first one 
     * that includes headers. */
    var rows = $('tr').not(':first');

    /* Create 'click' event handler for rows */
    rows.on('click', function(e) {

        /* Get current row */
        var row = $(this);

        /* Check if 'Ctrl', 'cmd' or 'Shift' keyboard key was pressed
         * 'Ctrl' => is represented by 'e.ctrlKey' or 'e.metaKey'
         * 'Shift' => is represented by 'e.shiftKey' */
        if ((e.ctrlKey || e.metaKey) || e.shiftKey) {
            /* If pressed highlight the other row that was clicked */
            row.addClass('highlight');
        } else {
            /* Otherwise just highlight one row and clean others */
            rows.removeClass('highlight');
            row.addClass('highlight');
        }

    });

    /* This 'event' is used just to avoid that the table text 
     * gets selected (just for styling). 
     * For example, when pressing 'Shift' keyboard key and clicking 
     * (without this 'event') the text of the 'table' will be selected.
     * You can remove it if you want, I just tested this in 
     * Chrome v30.0.1599.69 */
    $(document).bind('selectstart dragstart', function(e) { 
        e.preventDefault(); return false; 
    });

});

Finally, if you insist on creating a plugin, you can take a look at this site and customize the code for what you need.

http://learn.jquery.com/plugins/basic-plugin-creation/

Other functionalities just depend on you, I just answered what you required in the question :-) hope this helps.