LunaticWolf/assignment2.html

## assignment2.html
<!DOCTYPE html>
<html>
<head>
	<title>PlayerList</title>
	<link rel="stylesheet" type="text/css" href="PlayerList.css">
<style type="text/css">

	#dataDisplay
	{
			width:80%;
			font-family: Comic Sans MS;
			font-size: 20px;
			position:sticky;
			left:70px;
			padding: 10px;
			text-align: left;
	}


	table
	{
			width:90%;
	}


	fieldset
	{
		position: fixed;
		cursor: context-menu;
	}


	input[type=text],input[type=number]
	{
 	 	width: 80%;
  		padding: 5px;
  		border: 1px solid #ccc;
  		border-radius: 4px;
  		cursor: text;
	}


	#addPlayer
	{
  		background-color: #000;
  		color: white;
  		padding: 5px 10px;
  		border: none;
  		border-radius: 50px;
  		cursor: pointer;
  		float: inherit;
  	}

  	#reset
  	{
  		background-color: grey;
  		color: white;
  		padding: 5px 10px;
  		border: none;
  		border-radius: 50px;
  		cursor: pointer;
  		float: inherit;
  	}


	#removePlayer
	{
		background-color: #069;
		color: white;
		padding: 5px 20px;
  		border: none;
  		border-radius: 50px;
  		cursor: pointer;
  		float: right;
  		position: sticky;

	}

</style>


	<script type="text/javascript" src="PlayerList.js">


function AddPlayerDetails()
		{

			var tbody = document.getElementById('playerAdded');
			var nRowCount = tbody.rows.length;
			var tRow = tbody.insertRow(nRowCount);


			var cell1 = tRow.insertCell(0);
			var element1 = document.createElement("input");
			element1.type = "checkbox";
			element1.name = "chkbox[]";
			/*element1.setAttribute('type','checkbox');*/
			cell1.appendChild(element1);


			/*var cell2 = row.insertCell(1);
			cell2.innerHTML = rowCount + 1;*/

			var cell2 = tRow.insertCell(1);
			var element2 = document.createElement("td");
			element2.name = "nPlayerName[]";
			element2.id = "pName";
			var pName = document.createTextNode(document.getElementById('playerName').value);
			element2.appendChild(pName);
			/*element2.innerHTML = playerName;*/
			cell2.appendChild(element2);

			var cell3 = tRow.insertCell(2);
			var element3 = document.createElement("td");
			element3.name = "nMatchesPlayed[]";

			var pMatches = document.createTextNode(document.getElementById('matchesPlayed').value);
			element3.appendChild(pMatches);
			cell3.appendChild(element3);

			var cell4 = tRow.insertCell(3);
			var element4 = document.createElement("td");
			element4.name = "nInningsPlayed[]";
			var pInnings = document.createTextNode(document.getElementById('inningsPlayed').value);
			element4.appendChild(pInnings);
			cell4.appendChild(element4);

			var cell5 = tRow.insertCell(4);
			var element5 = document.createElement("td");
			element5.name = "nRunsScored[]";
			var pRuns = document.createTextNode(document.getElementById('runsScored').value);
			element5.appendChild(pRuns);
			cell5.appendChild(element5);

		}


		function removePlayerDetails()
		{

			try
			{
				var tbody = document.getElementById('playerAdded');
				var tRowCount = tbody.rows.length;
				for(var i=0; i<tRowCount; i++)
				{
					var row = tbody.rows[i];
					var chkbox = row.cells[0].childNodes[0];
					if(chkbox!=null && chkbox.checked==true)
					{
						tbody.deleteRow(i);
						tRowCount-=1;
						i-=1;
					}

				}
			}
			catch(e)
			{
				alert(e);
			}
		}


	</script>
</head>
<body>

	<fieldset>
		<legend>Player List</legend>
		<form>
			<table id="dataInput">
				<thead>
					<th>
						<input type="text" name="PlayerName" id="playerName" placeholder="Player Name" title="Enter Player Name" required/>
					</th>
					<th>
						<input type="number" name="MatchesPlayed" id="matchesPlayed" placeholder="Matches" title="Enter No. of Matches Played" required />
					</th>
					<th>
						<input type="number" name="InningsPlayed" id="inningsPlayed" placeholder="Innings" title="No. of Innings Plahyed" required />
					</th>
					<th>
						<input type="number" name="RunsScored" id="runsScored" placeholder="Runs" title="Enter Score" required />
					</th>
					<th>
						<input type="button" name="AddPlayer" id="addPlayer" value="+ Add Player" onclick="AddPlayerDetails()" />
					</th>
					<th>
						<input type="reset" name="Reset" id="reset" value="Reset" />
					</th>
				</thead>
			</table>
		</form>
			<hr>

			<table id="dataDisplay">
				<thead>
					<th>
						Select
					</th>
					<th>
						Name:
					</th>
					<th>
						Matches:
					</th>
					<th>
						Innings:
					</th>
					<th>
						Runs:
					</th>
				</thead>
				<tbody id="playerAdded">
				</tbody>
			</table>
<br>
			<button type="button" name="RemovePlayer" id="removePlayer" onclick="removePlayerDetails()">  - Remove Player </button>


	</fieldset>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>PlayerList</title>
	<link rel="stylesheet" type="text/css" href="PlayerList.css">
	<style type="text/css">

	#dataDisplay
	{
	width:80%;
	font-family: Comic Sans MS;
	font-size: 20px;
	position:sticky;
	left:70px;
	padding: 10px;
	text-align: left;
	}



	table
	{
	width:90%;
	}


	fieldset
	{
	position: fixed;
	cursor: context-menu;
	}


	input[type=text],input[type=number]
	{
	width: 80%;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: text;
	}




	#addPlayer
	{
	background-color: #000;
	color: white;
	padding: 5px 10px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	float: inherit;
	}

	#reset
	{
	background-color: grey;
	color: white;
	padding: 5px 10px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	float: inherit;
	}


	#removePlayer
	{
	background-color: #069;
	color: white;
	padding: 5px 20px;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	float: right;
	position: sticky;

	}

	</style>











	<script type="text/javascript" src="PlayerList.js">


	function AddPlayerDetails()
	{

	var tbody = document.getElementById('playerAdded');
	var nRowCount = tbody.rows.length;
	var tRow = tbody.insertRow(nRowCount);


	var cell1 = tRow.insertCell(0);
	var element1 = document.createElement("input");
	element1.type = "checkbox";
	element1.name = "chkbox[]";
	/element1.setAttribute('type','checkbox');/
	cell1.appendChild(element1);


	/*var cell2 = row.insertCell(1);
	cell2.innerHTML = rowCount + 1;*/

	var cell2 = tRow.insertCell(1);
	var element2 = document.createElement("td");
	element2.name = "nPlayerName[]";
	element2.id = "pName";
	var pName = document.createTextNode(document.getElementById('playerName').value);
	element2.appendChild(pName);
	/element2.innerHTML = playerName;/
	cell2.appendChild(element2);

	var cell3 = tRow.insertCell(2);
	var element3 = document.createElement("td");
	element3.name = "nMatchesPlayed[]";

	var pMatches = document.createTextNode(document.getElementById('matchesPlayed').value);
	element3.appendChild(pMatches);
	cell3.appendChild(element3);

	var cell4 = tRow.insertCell(3);
	var element4 = document.createElement("td");
	element4.name = "nInningsPlayed[]";
	var pInnings = document.createTextNode(document.getElementById('inningsPlayed').value);
	element4.appendChild(pInnings);
	cell4.appendChild(element4);

	var cell5 = tRow.insertCell(4);
	var element5 = document.createElement("td");
	element5.name = "nRunsScored[]";
	var pRuns = document.createTextNode(document.getElementById('runsScored').value);
	element5.appendChild(pRuns);
	cell5.appendChild(element5);

	}



	function removePlayerDetails()
	{

	try
	{
	var tbody = document.getElementById('playerAdded');
	var tRowCount = tbody.rows.length;
	for(var i=0; i<tRowCount; i++)
	{
	var row = tbody.rows[i];
	var chkbox = row.cells[0].childNodes[0];
	if(chkbox!=null && chkbox.checked==true)
	{
	tbody.deleteRow(i);
	tRowCount-=1;
	i-=1;
	}

	}
	}
	catch(e)
	{
	alert(e);
	}
	}







	</script>
	</head>
	<body>

	<fieldset>
	<legend>Player List</legend>
	<form>
	<table id="dataInput">
	<thead>
	<th>
	<input type="text" name="PlayerName" id="playerName" placeholder="Player Name" title="Enter Player Name" required/>
	</th>
	<th>
	<input type="number" name="MatchesPlayed" id="matchesPlayed" placeholder="Matches" title="Enter No. of Matches Played" required />
	</th>
	<th>
	<input type="number" name="InningsPlayed" id="inningsPlayed" placeholder="Innings" title="No. of Innings Plahyed" required />
	</th>
	<th>
	<input type="number" name="RunsScored" id="runsScored" placeholder="Runs" title="Enter Score" required />
	</th>
	<th>
	<input type="button" name="AddPlayer" id="addPlayer" value="+ Add Player" onclick="AddPlayerDetails()" />
	</th>
	<th>
	<input type="reset" name="Reset" id="reset" value="Reset" />
	</th>
	</thead>
	</table>
	</form>
	<hr>

	<table id="dataDisplay">
	<thead>
	<th>
	Select
	</th>
	<th>
	Name:
	</th>
	<th>
	Matches:
	</th>
	<th>
	Innings:
	</th>
	<th>
	Runs:
	</th>
	</thead>
	<tbody id="playerAdded">
	</tbody>
	</table>
	<br>
	<button type="button" name="RemovePlayer" id="removePlayer" onclick="removePlayerDetails()"> - Remove Player </button>


	</fieldset>

	</body>
	</html>