Untitled

<html>
<head>
<style> table {width:300px; margin-bottom:20px;border-collapse:collapse; }
tr,th, td {border: 1px black solid;}
</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>

$(document).ready(function(){
      $('#addform,#info,form').hide();

      $('#add').click(function () {
            $('#addform,#info,form').fadeIn(400);
      });

      $('#addform').click(function () {
            var errorFound = 0;

            $('span').empty();

            if($('#id').val() == '')
            {
                  $('span').append("<p>ID cannot be blank!</p>");
                  errorFound = 1;
            }

            if($('#name').val() == '')
            {
                  $('span').append("<p>Name cannot be blank!</p>");
                  errorFound = 1;
            }

            if($('#age').val() == '')
            {
                  $('span').append("<p>Age cannot be blank!</p>");
                  errorFound = 1;
            }

            $('tr').each(function () {
                  if($(this).children().first().text() == $('#id').val())
                  {
                        $('span').append("<p>There is already an item with this ID!</p>");
                        errorFound = 1;
                  }
            });

            if(!$.isNumeric($('#id').val()))
            {
                  $('span').append("<p>ID needs to be a number!</p>")
                  errorFound = 1;
            }

            if(!$.isNumeric($('#age').val()))
            {
                  $('span').append("<p>Age needs to be a number!</p>")
                  errorFound = 1;
            }

            if(errorFound == 0)
            {
                  $('table').append("<tr><td>" + $("#id").val() +"</td><td>" + $('#name').val() +"</td><td>" + $('#age').val() + "</td></tr>");
            }
      });

      $('table').on('mouseenter', 'tr', function () {
       $(this).css('color', "red");
     });

      $('table').on('mouseleave', 'tr', function() {
            $(this).css('color', "");
      });

      $("tr").dblclick(function() {
            $(this).remove();
      });
});
   </script>
</head>
<body>
<table>
       <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
       </tr>
       <tr>
          <td>1</td>
          <td>Messi</td>
          <td>28</td>
        </tr>
       <tr>
          <td>2</td>
          <td>Ronaldo</td>
          <td>30</td>
       </tr>

</table>
<div id ="info">Please enter information:</div>
<form>
            <span style="color:red"> </span>
      <p>ID: <input id ='id' type = 'text'/> </p>
      <p>Name: <input id = 'name' type = 'text'/></p>
      <p>Age: <input id ='age' type = 'text'/></p>
</form>
<button id = "add" >Add</button>
<button id = "addform">Add to Table</button></body>
</html>