<html>
<head>
</head>
<body>
<p><table id="t" width="1250" cellspacing="1" cellpadding="2" style="border: 1px solid black">
<tr>
<td>ID</td>
<td>Full Name</td>
<td>Reading Hall</td>
<td>Registration</td>
<td>Expiration Date</td>
<td>Period</td>
</tr>
</table></p>
<fieldset>
<legend>New Reader</legend> <label>Reader`s ID</label> <input id="ID"/> <button id="genID">generate id</button>
<p><label>Full Name</label> <input id="fullName" /></p>
<label>Reading Hall</label> <select id="RH">
<option>Financial</option>
<option>Computers/IT</option>
<option>Science Fiction</option>
<option selected>--Select reading hall--</option>
</select>
<p><label>Registration date</label> <input id="D"/> <select id="M"></select> <select id="Y"></select> </p>
<p><label>Expiration date</label> <input id="D2"/> <select id="M2"></select> <select id="Y2"></select> </p>
<p> <button id="AddReader">Add reader to table</button></p>
</fieldset>
<script>
genID.onclick=function(){
ID.value=Math.floor(Math.random()*20)
}
AddReader.onclick=function(){
var row=t.insertRow()
row.insertCell().innerHTML=ID.value
row.insertCell().innerHTML=fullName.value
row.insertCell().innerHTML=RH.value
var r_date=D.value, r_month=M.value, r_year=Y.value, e_date=D2.value, e_month=M2.value, e_year=Y2.value
row.insertCell().innerHTML=r_date+" "+r_month+" "+r_year
row.insertCell().innerHTML=e_date+" "+e_month+" "+e_year
var per=row.insertCell()
per.innerHTML="#"
var regDate=new Date(r_year, opts1.indexOf(r_month), r_date).getTime(),
expDate=new Date(e_year, opts1.indexOf(e_month), e_date).getTime(),
theTime=(expDate-regDate)/86400000
per.onclick=function(){alert(theTime)}
}
opts1=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
opts1.forEach(function(x){M.appendChild(new Option(x))})
opts2=["2005","2006","2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018","2019","2020","2021","2022","2023","2024","2025"]
opts2.forEach(function(z){Y.appendChild(new Option(z))})
opts1_2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
opts1_2.forEach(function(x){M2.appendChild(new Option(x))})
opts2_2=["2015","2016","2017","2018","2019","2020","2021","2022","2023","2024","2025"]
opts2_2.forEach(function(k){Y2.appendChild(new Option(k))})
</script>
</body>
</html>