JSFiddle - React, Tailwind, and code Playground

by PhillipSenn

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<table class="table table-bordered">
	<tr>
		<td><span class="glyphicon glyphicon-check"></span></td>
		<td>a<br>b<br>c<br>d</td>
	</tr>
</table>

CSS

.glyphicon-check, .glyphicon-unchecked {
    font-size:40px;
}
.cursorPointer {
	cursor:pointer;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

JavaScript

;(function() {
	$('.glyphicon-check').closest('td').addClass('cursorPointer') // Note to self: make sure to add class="cursorPointer" if you're adding a td element
	$('.glyphicon-unchecked').closest('td').addClass('cursorPointer')

	$(document).on('click','td',tdClicked)
	function tdClicked() {
		if ($(this).find('.glyphicon-check').length) {
			$(this).find('.glyphicon-check').removeClass('glyphicon-check').addClass('glyphicon-unchecked')
		} else if ($(this).find('.glyphicon-unchecked').length) {
			$(this).find('.glyphicon-unchecked').removeClass('glyphicon-unchecked').addClass('glyphicon-check')
		}
	}
})()