Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript - Add HTML Table Row </title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
        <script>
            function addRow() {
  // get input values
  var name = document.getElementById("name").value;
  var currentAge = document.getElementById("currentAge").value;
  var Birthday = document.getElementById("Birthday").value;
  var carType = document.getElementById("carType").value;
  var Delete = document.getElementById("Delete").value;

  var table = document.getElementsByTagName("table")[0];

  var newRow = table.insertRow(table.rows.length / 2 + 1);

  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  var cel4 = newRow.insertCell(3);
  var cel5 = newRow.insertCell(4);

  cel1.innerHTML = name;
  cel2.innerHTML = currentAge;
  cel3.innerHTML = Birthday;
  cel4.innerHTML = carType;
  cel5.innerHTML = Delete;
}

function deleteRow(event) {
  var row = event.target.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

function myFunction() {
  var x = document.getElementById("table").rows.length;
  document.getElementById("demo").innerHTML =
    "Found " + x + " tr elements in the table.";
}


            </script>

<style>


table, th {

border: 1px solid black;
}

tbody td{
  padding: 30px;
}


tbody tr:nth-child(odd){
  background-color: #F4BC01;
  color: #ABC412;
}


</style>

<body>
  <h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for elements amount</button>
  <p id="demo"></p>

  Name: <input type="text" name="name" id="name" /><br/><br/> Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/> Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>

  <button onclick="addRow();">Display</button><br/><br/>

  <p>Eye Colour:</p>

  <select id="carType">
        <option value="ferrari"  id="ferrari">Ferrari</option>
        <option value="lamborghini"  id="lamborghini">Lamborghini</option>
        <option value="porsche"  id="porsche">Porsche</option>
        <option value="bugatti"  id="bugatti">Bugatti</option>
        <option value="pagani" id="pagani">Pagani</option>
  </select>

  <table border="1" id="table">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Birthday</th>
      <th>CarType</th>
      <th>Delete Entry
        <button id="Delete" onclick="deleteRow(event)">delete</button> //this button right here

                </th>
            </tr>
        </table>
    </body>
</html>