JSFiddle - React, Tailwind, and code Playground

by Nathaniel Currier

HTML

<input id="feild1" type="text" placeholder="property1" />
<input id="feild2" type="text" placeholder="property2" />
<input id="feild3" type="text" placeholder="property3" />
<table>
    <tr>
        <td>foo1</td>
        <td>foo2</td>
        <td>foo3</td>
    </tr>
    <tr>
        <td>foobar 1</td>
        <td>foobar 2</td>
        <td>foobar 3</td>
    </tr>
    <tr>
        <td>party</td>
        <td>on</td>
        <td>wayne</td>
    </tr>
</table>

CSS

input {
    margin-botton: 20px;
}

td {
    width: 100px;
    border: 1px solid #ccc;
    padding: 10px;
}

tr {
    cursor: pointer;
}

tr:hover {
    background: lightBlue;
}

tr.selected {
    background: yellow;
}

JavaScript

$('tr').on('click', function(e) {
     $('tr').removeClass('selected');
     $(this).addClass('selected');
    
    $(':text').each(function(index) {
        $(this).val($('.selected')[0].children[index].innerText);    
    });

 });