JSFiddle - React, Tailwind, and code Playground

by rpflorence

HTML

<p>click me!</p>
<p>click me!</p>
<p>click me!</p>
<p>click me!</p>
<p>click me!</p>
<p>click me!</p>
<p>click me!</p>

CSS

p { border: solid 1px; }
p.selected { background: yellow }

JavaScript

var selecting = false;

$(document).bind({
    keydown: function(event){
        if (event.altKey) selecting = true;
    },
    keyup: function(event){
        if (selecting && !event.altKey) {
            selecting = false;
            $('p').removeClass('selected');
            // do something with the array of selected rows
        }
    }
});

$('p').bind('click', function(){
    if (selecting) {
        $(this).toggleClass('selected');
        // add the element or whatever to an array some where
    }
});