jQuery Challenge

jQuery Challenge
0

#1

Features to implement:

  • Delete row
  • Save new row
  • In edit mode display the date the way name and last name are displayed and save edited row with updated values
  • Sorting (ascending, descending)
  • Search by name which returns the table with the rows which names match the searched word
<!DOCTYPE html>

<html lang="en">
	<head>
		<title>The test</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
		</script>
		<style>
			td {
				width: 300px;
				height: 20px;
				text-align: center;
			}
			input {
				width: 100px;
			}
		</style>
	</head>
	<body>
    <div class = "main"></div>
  	<script>
	  	var isNewLineToggled = false;
			var isAscending = {
				name : false,
				lastName: false,
				dob: false
			};
			$(".main").append("<input placeholder='search by name' class='search'/><br/><br/>")
	   	$(".main").append("<button onclick=addPerson()>add a person</button><br/><br/>")
    	var table = $(".main").append("<table></table>");
			var thead = '<thead><tr></tr></thead>';
			table.append(thead);
			var header = [
				{ title: 'Name', sortBy: 'name'},
				{ title: 'Last Name', sortBy: 'lastName'},
			  { title: 'Date of birth', sortBy: 'dob'}
			].map(
				function(header) {
				 var sortButton = '<button id="' + header.sortBy + '" onclick=sortRows("'+ header.sortBy + '")>/\\</button>';
					$('thead').append('<th>' + header.title + ' ' + sortButton + '</th>');
				}
			)
			var tbody = "<tbody></tbody>";
			var data = [ {name: 'Peter', lastName: 'Petterson', dob: '13/12/1988'},
				{name: 'Anna', lastName: 'Jones', dob: '06/02/1968'},
				{name: 'John', lastName: 'Milton', dob: '01/06/2000'},
				{name: 'James', lastName: 'White', dob: '30/11/1970'},
				{name: 'Luke', lastName: 'Brown', dob: '15/08/1999'}
			];
			$('.search').change(function(event) {
				searchedName = event.target.value;
			})
			table.append(tbody);
		  data.map(
				function(row, i) {
					 $('tbody').append(
						 '<tr><td>' + row.name +
						 '</td><td>' + row.lastName +
						 '</td><td>' + row.dob +
						 '</td><td><button onclick=editRow('+i+')>edit</button><button>delete</button></td></tr>'
					 )
				}
			)
			var editableRow = "<td><input/></td><td><input/></td><td><input type='date'/></td><td><button onclick=saveRow()>save</button></td>";
			var editRow = function(rowNumber) {
				var name = $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:first-child').text();
				var lastName = $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:nth-child(2)').text();
				var dob = $('tbody > tr:nth-child('+(rowNumber + 1)+') > td:nth-child(3)').text();
				$('tbody > tr:nth-child('+(rowNumber + 1)+')').html(editableRow);
				$('tbody > tr:nth-child('+(rowNumber + 1)+') > td:first-child > input').val(name);
				$('tbody > tr:nth-child('+(rowNumber + 1)+') > td:nth-child(2) > input').val(lastName);
			}
			var sortRows = function(sortBy) {
				isAscending[sortBy] = !isAscending[sortBy];
				$('#'+sortBy).text(isAscending[sortBy] ? '\\/' : '/\\');
			};
			var addPerson = function() {
				isNewLineToggled = !isNewLineToggled;
				if (isNewLineToggled) {
					$('tbody').prepend('<tr>' + editableRow + '</tr>')
			  } else {
					$('tbody > tr:first-child').remove();
				}
			}
    </script>
	</body>
<html>

#2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.