Помощь с Динамической таблицей JAVASCRIPT
Помогите с написанием кода.Заранее спасибо!
Возможно использование jQuery,Boostrap.
1.Пользователь вписывает Название,Описание и Дату события.
2.Начинает идти секундомер.
3.После нажатия на кнопку "Add Log",результат спускается вниз,сортированный от раннему к позднему.
Выше перечисленное я уже смогла написать.
Далее сам результат должен автоматически вводится в таблицу,как отсчет.
Дата в свою колонку,Пройденное время в свою и тд.
Своего рода это программа time tracker
Как написать код так,чтобы результат вводился в таблицу?
СODE СЕКУНДОМЕР:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<script type="text/javascript">
function trim(string) { return string.replace (/\s+/g, " ").replace(/(^\s*)|(\s*)$/g, ''); }
var init=0;
var startDate;
var clocktimer;
function clearFields() {
init = 0;
clearTimeout(clocktimer);
document.clockform.clock.value='00:00:00.00';
document.clockform.label.value='';
document.clockform.description.value='';
document.clockform.date.value='';
}
function clearALL() {
clearFields();
document.getElementById('marker').innerHTML = '';
}
function startTIME() {
var thisDate = new Date();
var t = thisDate.getTime() - startDate.getTime();
var ms = t%1000; t-=ms; ms=Math.floor(ms/10);
t = Math.floor (t/1000);
var s = t%60; t-=s;
t = Math.floor (t/60);
var m = t%60; t-=m;
t = Math.floor (t/60);
var h = t%60;
if (h<10) h='0'+h;
if (m<10) m='0'+m;
if (s<10) s='0'+s;
if (ms<10) ms='0'+ms;
if (init==1) document.clockform.clock.value = h + ':' + m + ':' + s + '.' + ms;
clocktimer = setTimeout("startTIME()",10);
}
function findTIME() {
if (init==0) {
startDate = new Date();
startTIME();
init=1;
}
}
function stopALL(){
clearTimeout(clocktimer);
init=0;
}
function addLogTime(){
var str = trim(document.clockform.label.value);
document.getElementById('marker').innerHTML = (str==''?'':str+': ') +
document.clockform.clock.value +'<br>'+ document.clockform.date.value + '<br>' + document.clockform.description.value + '<br>' + document.getElementById('marker').innerHTML;
clearFields();
}
function pauseTime() {
clearTimeout(clocktimer);
init = 0;
}
</script>
<noscript><p>Извините, для работы приложения нужен включённый JavaScript</p></noscript>
<form name="clockform">
<p>
<input name="add log time" type="button" value="Add Log Time" onclick="addLogTime()">
<input name="reset" type="button" value="Reset" onclick="clearALL()">
</br>
</br>
Time spent:
<input name="clock" size="12" maxlength="12" value="00:00:00.00">
<input name="starter" type="button" value="Start" onclick="findTIME()">
<input name="stop" type="button" value="Stop" onclick="stopALL()">
<input name="pause" type="button" value="Pause" onclick="pauseTime()">
Name:
<input name="label" size="12" maxlength="30" value="">
Work description:
<input name="description" size="24" value="">
Date:
<input name="date" size="12" value="">
</p><p id="marker">
</p>
</form>
</body>
</html>
СODE ТАБЛИЦА:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="POItablediv">
<table id="POITable" border="1">
<tr>
<td>Start Date</td>
<td>Name</td>
<td>Spent time</td>
<td>Description</td>
<td></td>
<td></td>
</tr>
<tr>
<td><input size=25 type="text" id="latbox" /></td>
<td><input size=25 type="text" id="latbox" /></td>
<td><input size=25 type="text" id="latbox" /></td>
<td><input size=25 type="text" id="latbox" /></td>
<td><input type="button" id="delPOIbutton" value="-" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addmorePOIbutton" value="+" onclick="insRow()" /></td>
</tr>
</table>
<script type="text/javascript">
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow() {
var x = document.getElementById('POITable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
x.appendChild(new_row);
}
</script>
</body>
</html>