select row and enable a button

by bryiantan

HTML

<button id="selectedTaskDropdown">
This button Enables/Disables
</button>

<table class="table table-hover">
<thead>
<tr>
<th> </th>
<th>Title</th>
<th>Comments</th>
<th>Created</th>
<th>Due</th>
<th>Creator</th>
<th>%</th>
<th>Type</th>
</tr>
</thead>
<tbody id="taskstbody"><tr class="table-row  taskGrpRow" data-id="chkTask1" id="chkTask1">
<td class="taskGrpRow"></td>
<td class="taskGrpRow">Test Task</td>
<td class="taskGrpRow">This is a task example</td>
<td class="taskGrpRow">1 week ago</td>
<td class="taskGrpRow">in 2 Weeks </td>
<td class="taskGrpRow">admin</td>
<td class="taskGrpRow">0%</td>
<td class="taskGrpRow"> To Do</td>
</tr><tr class="table-row alert-warning taskGrpRow" data-id="chkTask2" id="chkTask2">
<td class="taskGrpRow"></td>
<td class="taskGrpRow">Example Task</td>
<td class="taskGrpRow">Example of an overdue task</td>
<td class="taskGrpRow">2 months ago</td>
<td class="taskGrpRow"> Due 4 Weeks ago</td>
<td class="taskGrpRow">admin</td>
<td class="taskGrpRow">3%</td>
<td class="taskGrpRow"> Follow Up</td>
</tr><tr class="bg-success table-row fh-checkbox taskGrpRow selected" data-id="chkTask3" id="chkTask3">
<td></td>
<td>Example Task</td>
<td>Example of a completed task</td>
<td>1 month ago</td>
<td>1 Week ago</td>
<td>admin</td>
<td>100%</td>
<td> To Do</td>
</tr></tbody>
</table>

CSS

tr.selected {background-color:#fff !important;color:#000 !important; border:#ccc 4px solid !important;font-weight: bold !important;}

JavaScript

$(document).ready(function(){

var prevSel ="";
var taskid = "";

	$("tr.table-row.taskGrpRow").on("click", function() {
		
		var _prevSel = "#" + prevSel;
		var _curSel = "#" + $(this).data("id");
		//only one task selection at a time so check if the previous selection is set and remove selected class
console.log("_prevSel: " + _prevSel + " _curSel " + _curSel)		;
		if(_prevSel === "#"){
		
		console.log("Previous Selection: Empty");
		
		}else if(  _prevSel !== undefined && _prevSel !==  _curSel){
		
		
		}else{
		
		console.log("Previous Selection11:" + _prevSel);
		
			//$(_prevSel).removeClass("selected");
		
				
		}
		

		
		var taskid = $(this).data("id");
		
		console.log("Task Selected: " + taskid); 
		
	var itemSelected = "#" + taskid;	
	var classSelected = $(itemSelected).hasClass("selected");
	
	console.log($(itemSelected).className + " | " + classSelected);
	
	console.log($(this));
	
	if(classSelected === true){
	
	console.log("Class '.selected Present' on " + $(this).attr("id"));
	$(itemSelected).removeClass("selected");
	$("#selectedTaskDropdown").prop("disabled", true);
	
	}else{
	
  if(_prevSel !== "#"){
  	$(_prevSel).removeClass("selected");
  }
  
	console.log("Class '.selected Not Present' on " + $(this).attr("id"));
	
	$(this).addClass("selected");
	$("#selectedTaskDropdown").prop("disabled", false);
  
  
  
	}
  
	
	prevSel = taskid;
		
	});
	
});