Untitled

 <!DOCTYPE HTML>

<html>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<head><br> <center> <h2> Quelle est la meilleure maison selon vous ? </h2></center></head>
<br>


<nav class ="navbar navbar-inverse">
 <div "class = container-fluid">
 <ul class ="nav">
	  <li> <a> 1</a> </li>
	  <li> <a> 2</a> </li></ul>
</nav>
<!--<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav> !-->


<body> <div class="row">
<div class="container">
<div class="collapse in" id ="collapser"><table id="tableauvote" class="table table-bordered table-striped table-condensed">
<thead>
	<tr>
		<th> Nom </th>
		<th > Prenom </th>
		<th > Choix </th>
		<th > Email </th>
		<th> Date </th>
		<th > Actions </th></tr>
</thead>
<tbody>
	<tr class = "danger">
		<td> Potter </td>
		<td> Harry </td>
		<td> Gryffondor </td>
		<td> bidule@truc.com </td>
		<td> date </td>
		<td>  <button type="button" onclick="Supprimer(this.parentNode.parentNode.rowIndex)" class="btn btn-primary btn-xs">Supprimer vote</button>
</td></tr>
	<tr class = "danger">
		<td> Granger </td>
		<td> Hermione </td>
		<td> Gryffondor </td>
		<td> bidule@truc.com </td>
		<td> date </td>
		<td>  <button type="button" onclick="Supprimer(this.parentNode.parentNode.rowIndex)" class="btn btn-primary btn-xs">Supprimer vote</button></tr>
	<tr class = "danger">
		<td> Weasley </td>
		<td> Ronald </td>
		<td> Gryffondor </td>
		<td> bidule@truc.com </td>
		<td> date </td>
		<td>  <button type="button" onclick="Supprimer(this.parentNode.parentNode.rowIndex)" class="btn btn-primary btn-xs">Supprimer vote</button></tr>
	<tr class = "info">
		<td> Lovegood </td>
		<td> Luna </td>
		<td> Serdaigle </td>
		<td> bidule@truc.com </td>
		<td> date </td>
		<td>  <button type="button" onclick="Supprimer(this.parentNode.parentNode.rowIndex)" class="btn btn-primary btn-xs">Supprimer vote</button></tr>
	<tr class = "danger">
		<td> Londubat </td>
		<td> Neville </td>
		<td> Gryffondor </td>
		<td> bidule@truc.com </td>
		<td> date </td>
		<td>  <button type="button" onclick="Supprimer(this.parentNode.parentNode.rowIndex)" class="btn btn-primary btn-xs">Supprimer vote</button></tr>
	<tr class = "info">
		<td> Chang </td>
		<td> Cho </td>
		<td> Serdaigle </td>
		<td> bidule@truc.com </td>
		<td> date </td>
		<td>  <button type="button" onclick="Supprimer(this.parentNode.parentNode.rowIndex)" class="btn btn-primary btn-xs">Supprimer vote</button></tr>
</tbody></table>

<form class = "form-inline"><div class="container">
<div class="form-group"><label for="nom">Nom :</label>
<input type="nom" class="form-control" id="nom"></div>
<div class="form-group"><label for="prenom">Prenom :</label>
<input type="prenom" class="form-control" id="prenom"></div>
<div class="form-group"><label for="choix">Choix :</label>
<select type="choix" class="form-control" id="choix">
<option>Gryffondor</option>
<option> Serdaigle </option>
<option> Poufsouffle </option>
<option> Serpentard </option></select></div>
<div class="form-group"><label for="email">Email :</label>
<input type="email" class="form-control" id="email"></div>
<button type="button" onclick="Ajouter()" class="btn btn-primary btn-xs">Ajouter vote</button>
</div> </form>

</div>
	</br>
	<button type="button" class="btn btn-primary btn-xs" data-toggle="collapse" data-target="#collapser">Collapse</button>
		</div>
</div>

</body>


<!-- css !-->


<footer> Clara Goncalves - p1609763
Jeff Firmin-Pignot - p1409595</footer>

<style>
body{background-color:white; }

footer{ position: fixed;
	right:0;
	left:0;
	bottom:0;
	padding: 5px;
	background-color: black;
	color: white;
	text-align :center;
	justify-content: space-around;
	opacity: 0.9;
	filter:alpha (opacity=90)}

.nav li{display:inline-block;
width:50px;
}


</style>
<script>function Supprimer(index){
 console.log(index);
 document.getElementById("tableauvote").deleteRow(index);
}
/*function Modifier(index){
document.getElementById("tableauvote").innerHTML=()
}*/

function Ajouter(){
let mail = document.getElementById("email").value;
let nom = document.getElementById("nom").value;
let prenom = document.getElementById("prenom").value;
let choix = document.getElementById("choix").value;

$('#tableauvote tr:last').after('<tr class = "danger"> <td>' + nom + '</td> <td>'+ prenom +' </td> <td>'+ choix +' </td> <td>'+ mail + ' </td> <td> date </td> <td>  <button type="button" onclick="Supprimer(this.parentNode.parentNode.rowIndex)" class="btn btn-primary btn-xs">Supprimer vote</button> </tr>');
}
</script>
</html>