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>ID</th>
							<th>Name</th>
							<th>Occupation</th>
							<th>Approx. Location</th>
							<th>Price</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>203A</td>
							<td>Johny Stardust</td>
							<td>Front-man</td>
							<td>Los Angeles</td>
							<td>$39.95</td>
						</tr>
						<tr>
							<td>141B</td>
							<td>Beau Dandy</td>
							<td>Singer</td>
							<td>New York</td>
							<td>$39.95</td>
						</tr>
						<tr>
							<td>2031</td>
							<td>Mo' Fat</td>
							<td>Producer</td>
							<td>New York</td>
							<td>$19.95</td>
						</tr>
						<tr>
							<td>007F</td>
							<td>Kellie Kelly</td>
							<td>Singer</td>
							<td>Omaha</td>
							<td>$11.95</td>
						</tr>
						<tr>
							<td>8A05</td>
							<td>Darth Fader</td>
							<td>DJ</td>
							<td>London</td>
							<td>$19.95</td>
						</tr>
						<tr>
							<td>6636</td>
							<td>Glendatronix</td>
							<td>Keytarist</td>
							<td>London</td>
							<td>$39.95</td>
						</tr>
					</tbody>
				</table>
			</form>
		</div>

		<div id="footer">
			<p>
				&copy; Copyright 2010 CelebriTracker Productions
			</p>
		</div>
	</div>
</body>

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() {
  TABLE.formwork('#celebs');
});

var TABLE = {};

TABLE.formwork = function(table) {
  var $tables = $(table);
  
  $tables.each(function () {
    var _table = $(this);
    _table.find('thead tr').append($('<th class="edit">&nbsp;</th>'));
    _table.find('tbody tr').append($('<td class="edit"><input type="button" value="Edit"/></td>'))
  });
  
  $tables.find('.edit :button').on('click', function(e) {
    TABLE.editable(this);
    e.preventDefault();
  });
}

TABLE.editable = function(button) {
  var $button = $(button);
  var $row = $button.parents('tbody tr');
  var $cells = $row.children('td').not('.edit');
  
  if ($row.data('flag')) { // in edit mode, move back to table
    // cell methods
    $cells.each(function () {
      var _cell = $(this);
      _cell.html(_cell.find('input').val());
    });
    
    $row.data('flag',false);
    $button.val('Edit');
  } 
  else { // in table mode, move to edit mode 
    // cell methods
    $cells.each(function() {
      var _cell = $(this);
      _cell.data('text', _cell.html()).html('');
      
      var $input = $('<input type="text" />')
        .val(_cell.data('text'))
        .width(_cell.width() - 16);
        
      _cell.append($input);
    });
    
    $row.data('flag', true);
    $button.val('Save');
  }
}