JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body>
	<div id="container">
		<div id="header">
			<h1>StarTrackr!</h1>
		</div>
		<div id="content">
			<h2>Celebs</h2>
	    
			<form action="null" method="post">     
				<table id="celebs">
					<thead>
						<tr>
							<th><input type="checkbox" id="checker" /></th>
							<th>Id</th>
							<th>Name</th>
							<th>Occupation</th>
							<th>Approx. Location</th>
							<th>Price</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><input type="checkbox"/></td>
							<td>203A</td>
							<td>Johny Stardust</td>
							<td>Front-man</td>
							<td>
								<a class="ttarget" href="http://www.la.com/">Los Angeles</a>
							</td>
							<td>$39.95</td>
						</tr>
						<tr>
							<td><input type="checkbox"/></td>
							<td>6636</td>
							<td>Glendatronix</td>
							<td>Keytarist</td>
							<td><a href="http://www.london.co.uk/" class="tooltip" title="Check out all the Celebs in London this week.">London</a></td>
							<td>$39.95</td>
						</tr>
						<tr>
							<td><input type="checkbox"/></td>
							<td>141B</td>
							<td>Beau Dandy</td>
							<td>Singer</td>
							<td><a href="http://www.newyork.com/">New York</a></td>
							<td>$39.95</td>
						</tr>
						<tr>
							<td><input type="checkbox"/></td>
							<td>2031</td>
							<td>Mo' Fat</td>
							<td>Producer</td>
							<td><a href="http://www.newyork.com/">New York</a></td>
							<td>$19.95</td>
						</tr>
						<tr>
							<td><input type="checkbox"/></td>
							<td>007F</td>
							<td>Kellie Kelly</td>
							<td>Singer</td>
							<td><a href="http://www.omaha.com/">Omaha</a></td>
							<td>$11.95</td>
						</tr>
						<tr>
							<td><input type="checkbox"/></td>
							<td>8A05</td>
							<td>Darth Fader</td>
							<td>DJ</td>
							<td><a href="http://www.london.co.uk/">London</a></td>
							<td>$19.95</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>

		<div id="footer">
			<p>
				&copy; Copyright 2010 CelebriTracker...

CSS

.table-wrapper {
	width: 520px;
}

.wrapper-paging {
	display: none;
}

.wrapper-paging ul,
.wrapper-paging li {
	float: left;
	margin: 0;
	padding: 0;
}

.wrapper-paging ul {
	float: left;
	list-style-type: none;
	text-align: left;
}

.wrapper-paging a {
	border: 2px solid #FFFFFF;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	display: inline-block;
	color: #015287;
	cursor: pointer;
	margin-right: 3px;
	padding: 3px 7px;
	text-decoration: none;
}

.wrapper-paging .paging-this {
	cursor: default;
	padding: 3px 0;
}

.wrapper-paging a:hover {
	background-color: #015287;
	color: #FFFFFF;
}

.wrapper-paging .paging-back,
.wrapper-paging .paging-next {
	border-color: #015287;
}

.wrapper-paging .paging-this:hover {
	background-color: #FFFFFF;
	color: #015287;
}

.wrapper-paging .paging-this b {
	font-weight: normal;
}

.wrapper-paging .paging-disabled,
.wrapper-paging .paging-disabled:hover {
	background-color: #FFFFFF;
	border-color: grey;
	color: grey;
	cursor: default;
}

JavaScript

$(document).ready(function() {
  var chkSelector = 'tr td:nth-child(1) :checkbox';
  
  $('#checker').click(function() {
    $('#celebs ' + chkSelector)
     .prop('checked', $(this).prop('checked'));	
  });

  $('#celebs ' + chkSelector).click(function(e) {
    var $table = $(this).parents('table');
    var lastRow = $table.data('lastRow');
    var thisRow = $(this).parents('tr').index();

    if (lastRow !== undefined && e.shiftKey) {
      var numChecked = 0;
      var start = lastRow < thisRow ? lastRow : thisRow;
      var end = lastRow > thisRow ? lastRow : thisRow;
      $table
	.find(chkSelector)
	.slice(start, end)
	.prop('checked', true);
    }
    $table.data('lastRow', thisRow);
  });
});