Хелперы jQuery на помощь

Илья Сычевский

Всем привет, пишу проектик todo list (список дел), нужно чтобы при нажатии кнопки, данные выводились в таблицу, но вывода в таблицу нет.

Вот код:
HTML

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>example</title>
<link rel="stylesheet" href="template/css/foundation.css" />
<link rel="stylesheet" href="template/css/style.css">
<script src="template/js/jquery-3.2.0.js"></script>
</head>
<body>
<table id="to-do-list">
<caption>What's up next?</caption>
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Date</th>
<th scope="col">Priority</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Invitees</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<form id="add-new-task">
<label for="new-task-name">Name:</label>
<input id="new-task-name" name="new-task-name" type="text" required>
<label for="new-task-date">Date:</label>
<input id="new-task-date" name="new-task-date" type="datetime" required>
<br/>
<label for="new-task-priority">Priority:</label>
<input id="new-task-priority" name="new-task-priority" type="number" required min="1" max="5" step="1" value="2">
<label for="new-task-color">Color:</label>
<input id="new-task-color" name="new-task-color" type="color">
<br/>
<label for="new-task-desc">Description:</label>
<input id="new-task-desc" name="new-task-desc" type="text">
<br/>
<label for="new-task-email">Invite:</label>
<input id="new-task-email" name="new-task-email" type="email" multiple>
<br />
<input type="submit" value="Add new">
</form>
<script src="template/js/my_JS.js"></script>
<script src="template/js/vendor/what-input.js"></script>
<script src="template/js/vendor/foundation.js"></script>
<script src="template/js/js/app.js"></script>

jS

jQuery('form#add-new-task');
jQuery(document).on('ready', function() {
jQuery('form#add-new-task').bind('submit', function(event){
event.preventDefault();
var tbody = jQuery('#to-do-list > tbody');
tbody.append('button' + this['new-task-date'].value +
'' + this['new-task-priority'].value + '' + this['new-task-name'].value +
'' + this['new-task-desc'].value + '' + this['new-task-email'].value + '');
return false;
});
});

Жду вашего скорейшего ответа
P.S. Желательно с демонстрацией кода

1 чел.