JSFiddle - React, Tailwind, and code Playground

by kboucher

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <table id="table" border="1">
        <tr>
        <label for="check">
            <td><input type="checkbox" id="check"></td>
            <td>Pizza</td>
            <td>1000$</td>
            <td>1200$</td>
            <td>Vegetable Pizza</td>
            <td>1</td>
            <td>F138</td>
            <td>Klik pre detaily</td>
            </label>
        </tr>
        <tr>
            <td><input type="checkbox" id="check"></td>
            <td>Burger</td>
            <td>1000$</td>
            <td>1200$</td>
            <td>HOT Sanwidtch Burger</td>
            <td>1</td>
            <td>F138</td>
            <td>Klik pre detaily</td>
        </tr>
        <tr>
            <td><input type="checkbox" id="check"></td>
            <td>KFC Chicken</td>
            <td>1000$</td>
            <td>1200$</td>
            <td>Spicy Hot Chicken</td>
            <td>1</td>
            <td>F138</td>
            <td>Klik pre detaily</td>
        </tr>

    </table>

CSS

td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}

    .selected {
        background-color: brown;
        color: #FFF;
    }

JavaScript

$(document).ready(function(){

       $("#table tr").click(function() {

	       $(this).addClass('selected').siblings().removeClass('selected');
         
         // You should add these two lines for the checkbox itself
	       $(this).addClass('selected').siblings().find('input[type=checkbox]').prop('checked', false);
         $('input[type=checkbox]', this).prop('checked', true);
         
  	     var value1=$(this).find('td:nth-child(2)').html();
    	   var value2=$(this).find('td:nth-child(3)').html();
      	 var value3=$(this).find('td:nth-child(5)').html();
       	 
         alert(value1+" "+value2+" "+value3);   
   });
});