Добавить данные из формы на страницу при клике на кнопку

$('#form').submit(function(e){ //по клику на сабмит 
   e.preventDefault(); //предотвращаем отправку формы 
   //создаём внутри таблицы ячейки и выводим туда данные из формы 
   $('table').append( 
   		'<tr><td class="name">'+$('#name').val()+'</td><td class="surname">'+$('#surname').val()+'</td><td class="phone">'+$('#phone').val()+'</td><td class="delete"><b>X</b></td></tr>'); 
   $('input').not('[type="submit"]').val(''); //очищаем поля формы 
}); 
 
$('table').on('click', '.delete', function(){ //по клику на крестик удаляем строку 
		$(this).closest('tr').remove(); 
});

table { 
  border-collapse: collapse; 
} 
 
.name, .surname, .phone, .delete { 
  padding: 10px; 
  border: 1px solid black; 
} 
 
.delete { 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="form"> 
Имя <input type="text" id="name" /><br /><br /> 
Фамилия <input type="text" id="surname" /><br /><br /> 
Телефон <input type="text" id="phone" /><br /><br /> 
<input type="submit" value="Сохранить контакт" /><br /><br /> 
</form> 
<br /> 
<hr /> 
 
<table> 
 
</table>