JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<table id="people">
    <tr>
        <th id="id">ID</th>
        <th id="name">Name</th>
    </tr>
    <tr id="user_1">
        <td headers="id">1</td>
        <td headers="name">Bob</td>
    </tr>
    <tr id="user_2">
        <td headers="id">2</td>
        <td headers="name">Carl</td>
    </tr>
    <tr id="user_3">
        <td headers="id">3</td>
        <td headers="name">Jane</td>
    </tr>
    <tr id="user_4">
        <td headers="id">4</td>
        <td headers="name">Steven</td>
    </tr>
    <tr id="user_5">
        <td headers="id">5</td>
        <td headers="name">Sarah</td>
    </tr>
    <tr id="user_6">
        <td headers="id">6</td>
        <td headers="name">Marc</td>
    </tr>
</table>

CSS

html {
    font-family: Verdana;
    font-size: 10pt;
}
td {
    border: 1px solid;
}
.marked {
    background: #e5e5e5;
    font-weight: bold;
}

JavaScript

var selections = new Array(2);

$("tr").click(function () {
	var selected = $(this).attr('id');
    $(this).toggleClass("marked");
});

$("tr").dblclick(function(e) {
    if ($('.marked').length == 1) {
        var marked     = $('.marked').html(),
            marked_id  = $('.marked').attr('id'),
            element    = $(this).html(),
            element_id = $(this).attr('id');
        $('tr[id="'+marked_id+'"]').html(element);
        $('tr[id="'+element_id+'"]').html(marked);
        $('tr').removeClass('marked');
    }
});