JSFiddle - React, Tailwind, and code Playground

HTML

<center>
<table border="1" cellspacing="1" cellpadding="4">
    <tr id="first_tr">
        <td class="raz">#</td>
        <td class="dva">Quantity</td>
        <td class="three">Price</td>
    </tr>
    <tr>
        <td class="raz">1</td>
        <td class="dva">94</td>
        <td class="three">15.99</td>
    </tr>
    <tr>
        <td class="raz">2</td>
        <td class="dva">924</td>
        <td class="three">125.99</td>
    </tr>
    <tr>
        <td class="raz">3</td>
        <td class="dva">174</td>
        <td class="three">211.69</td>
    </tr>
    <tr>
        <td class="raz">4</td>
        <td class="dva">201</td>
        <td class="three">500.69</td>
    </tr>
</table>
</center>

CSS

table{
    border:1px #666666 solid;
    background-color:#D9FEB7;
    width:93%;
}
#first_tr{
    background-color:#D4D8C8;
}
td{
    text-align:center;
}
#first_tr>td{
    font-weight:600;
}
.raz{
    width:15%;
    cursor:pointer;
}
tr:nth-child(even){
    background-color:#EAFFEC;
}

JavaScript

$('tr:gt(0)').css('cursor','pointer').click(function(){
    var pos = $(this).children('.raz').text();
    var quant = $(this).children('.dva').text();
    var price = $(this).children('.three').text();
    alert('Позиция '+pos+':\nвыбранное количество: '+quant+'\nпо цене: $'+price+'');
});