JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<table id="dashboard">
    <tr id="1"><td class="inputData"><input type="checkbox" /></td><td class="group">aaaa</td></tr>
     <tr id="2"><td class="inputData"><input type="checkbox" /></td><td>dddd</td></tr>
     <tr id="3"><td class="inputData"><input type="checkbox" /></td><td>wwww</td></tr>
      <tr id="4"><td class="inputData"><input type="checkbox" /></td><td>weee</td></tr>
      <tr id="35"><td class="inputData"><input type="checkbox" /></td><td>wwww</td></tr>
      <tr id="6"><td class="inputData"><input type="checkbox" /></td><td>rrrr</td></tr>
      <tr id="7"><td class="inputData"><input type="checkbox" /></td><td>tttt</td></tr>
</table>

CSS

.selectedTableRow{
	background-color: #D8F0FF !important;
    border: 3px solid #007BD7 !important;
}

JavaScript

//Single and multiple select checkboxes

$("table#dashboard tr td").live("click", function (evt) {
            	console.log($(this));
			    var evtId = $(this).closest('tr').attr('id');
			    console.log(evtId);
			    var flag = 1;
			    if (!($(this).closest('td').hasClass('group'))) {
			    	if(!($(this).closest('td').hasClass('inputData'))){			    	
				        if($('tr#'+evtId+' input[type=checkbox]').is(':checked')){
				           $("tr#"+evtId+" input[type=checkbox]").removeAttr('checked');
				           $(this).closest('tr').removeClass('selectedTableRow');
				        } else {
				            var sizedata = $('table#dashboard tr td  :checked').size();
							console.log(sizedata)
							if(sizedata ==1){
								$("table#dashboard tr").removeClass("selectedTableRow");
						        $("table#dashboard tr td input[type=checkbox]").removeAttr('checked');
							}
							$(this).closest('tr').addClass("selectedTableRow");
				            $("tr#"+evtId+" input[type=checkbox]").attr('checked',true);  
										           
				        }
				    } else {
				         if($('tr#'+evtId+' input[type=checkbox]').is(':checked')){
				               $(this).closest('tr').addClass("selectedTableRow");
				         } else {
				              $(this).closest('tr').removeClass("selectedTableRow");
				         }
				    }
			    } 
			    var sizedata = $('table#dashboard tr td  :checked').size();
			    if( sizedata< 2) {
			        newId = $('table#dashboard tr td  :checked').closest('tr').attr('id');
			    }
			 });