Формы, динамическая таблица
Доброго времени суток. Помогите советом новичку (чем пользоваться, где найти).
Допустим, у меня есть электронная библиотека для которой нужно создать список читателей. При входе на хтмл страницу появляется форма для заполнения (id, имя, время регистрации и т.д.). На этой же странице размещается сама таблица, которую нужно привязать к форме заполнения, то есть, заполнив все поля и нажав на кнопку "добавить читателя" таблица автоматически обновляется и добавляет нового пользователя, и т.д. Я немного в замешательстве. Буду благодарен любым советам/ответам. Спасибо. |
сделать то это не трудно
<html>
<head>
</head>
<body>
<input id="userName" />
<input id="userId" />
<input id="regTime" />
<button id="b">add</button>
<table id="t" style="border: 1px solid black">
<tr>
<td>username</td>
<td>userid</td>
<td>regtime</td>
</tr>
</table>
<script>
b.onclick=function(){
var row=t.insertRow()
row.insertCell().innerHTML=userName.value
row.insertCell().innerHTML=userId.value
row.insertCell().innerHTML=regTime.value
}
</script>
</body>
</html>
Только вот зачем? Данные то все равно сохрантяь где то надо. Не проще ли сразу слать на сервер? |
Спасибо за ответ.
Хочу все делать поэтапно, начиная с малого. Можно еще вопрос: к примеру, если мне понадобится кнопочка для генерации id пользователя в каких-то пределах (скажем, по ее нажатию новый читатель получит случайный идентификатор в диапазоне 0-20). С помощью чего это сделать: есть, например, function random для генерации случайного числа, а как ее "впихнуть" в кнопку? Может мои вопросы и покажутся кому-то слишком простыми и даже глупыми, но не судите строго - только начинаю осваивать язык. |
<html>
<head>
</head>
<body>
<input id="userName" />
<input id="userId" />
<input id="regTime" />
<button id="b">add</button>
<button id="gen">generate id</button>
<table id="t" style="border: 1px solid black">
<tr>
<td>username</td>
<td>userid</td>
<td>regtime</td>
</tr>
</table>
<script>
gen.onclick=function(){
userId.value=Math.floor(Math.random()*20)
}
b.onclick=function(){
var row=t.insertRow()
row.insertCell().innerHTML=userName.value
row.insertCell().innerHTML=userId.value
row.insertCell().innerHTML=regTime.value
}
</script>
</body>
</html>
UPD Только id в диапазоне 20 -- это туфта. В норме генератор должен порождать гарантированно уникальные номера. Проще всего это реализовать итератором. Random тут не при чем. |
Цитата:
1) таблица в бд на сервере 2) вывод таблицы из бд на сервере 3) ввод в таблицу в бд на сервере 4) пункт 2 и 3 через аякс |
Спасибо за ответы, буду разбираться.
|
Доброго времени суток. Получается примерно такая картина. В основном вышло, что хотел. Но есть еще пару вопросов, в частности по датам:
Хочу сделать, чтобы поле Registration содержало три элемента, представляющие дату регистрации: текстовое поле числа месяца, список с месяцами и список годов, скажем, в диапазоне +-10 лет от текущего года (соответственно, чтобы информация заносилась в таблицу аналогичным образом). Сделать все по отдельности не составляет проблем, загвоздка в том, чтобы эти элементы "связать" и выносить в табличку, как и остальные. Как это лучше сделать? Буду благодарен любым ответам/советам.
<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="gen">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</label> <input id="Registration"/></p>
<p> <button id="b">Add reader to table</button></p>
</fieldset>
<script>
gen.onclick=function(){
ID.value=Math.floor(Math.random()*20)
}
b.onclick=function(){
var row=t.insertRow()
row.insertCell().innerHTML=ID.value
row.insertCell().innerHTML=fullName.value
row.insertCell().innerHTML=RH.value
row.insertCell().innerHTML=Registration.value
}
</script>
</body>
</html>
|
То,что вы сделали не несет никакого практического применения, все данные в вашей табличке на сервере не сохраняются и перезагрузке страницы удалются
|
Если я правильно понял
<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="gen">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="Registration_date"/></p>
<p><label>Registration month</label> <select id="Registration_month"><option>01</option><option>02</option></select> </p>
<p><label>Registration year</label> <select id="Registration_year"><option>2000</option><option>2001</option></select> </p>
<p> <button id="b">Add reader to table</button></p>
</fieldset>
<script>
gen.onclick=function(){
ID.value=Math.floor(Math.random()*20)
}
b.onclick=function(){
var row=t.insertRow()
row.insertCell().innerHTML=ID.value
row.insertCell().innerHTML=fullName.value
row.insertCell().innerHTML=RH.value
row.insertCell().innerHTML=Registration_date.value+" "+Registration_month.value+" "+Registration_year.value
}
</script>
</body>
</html>
|
Царь Леонид,
Я понимаю, но это скорее задание "для себя". Просто придумал задачку и захотел ее решить. Но все же спасибо за ответ. |
theKingOfJava,
Да, что-то похожее на это. Не думал, что так просто это можно сделать. Спасибо за ответ. |
Yuliya1121,
Все будем миллионерами. |
theKingOfJava,
Вопрос: можно на html страничке выпадающий список максимально сократить (убрать option), задав в javascript массив элементов списка и "привязав" его к select? К примеру, создать скрипт, где все option будут объявлены в одной новой переменной? |
<html>
<head>
</head>
<body>
<select id="s"></select>
<script>
opts=[1,2,3,5]
opts.forEach(function(x){s.appendChild(new Option(x))})
</script>
</body>
</html>
|
Огромное спасибо)
|
Доброго времени суток, уважаемые программисты. К вам есть очередной вопрос: есть следующий код, работает все как хотел. Но появилась еще одна мысль, реализовать которую не хватает ума. Скажем, добавили мы нового пользователя, указали дату регистрации и ее окончания.
Можно ли в последнюю колонку "Period" вывести, скажем, значок решетки, при нажатии на которую появится всплывающее окошко (alert), где будет указано количество дней, оставшихся до окончания регистрации выбранного пользователя. Другими словами, от значения Expiration будет отниматься Registration, и на выходе мы получим определенное количество дней. Просто объявить переменные и отнимать от одной другую - глупая идея, и ничего здесь не выйдет (может я ошибаюсь, но вряд ли). Мне кажется, с этим кодом это сделать не выйдет, т.к. яваскрипт вряд ли вобще понимает, что в наших ячейках есть даты..
<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
row.insertCell().innerHTML=D.value+" "+M.value+" "+Y.value
row.insertCell().innerHTML=D2.value+" "+M2.value+" "+Y2.value
}
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>
|
Сервер хранит регистрацию, так что ему трудно выдать готовое - количество дней ее окончания? И это можно получить уже sql-запросом.
А уж как показать, сразу ли, или в окошечке, это как нравится. Зачем возлагать на клиента задачи, которые не имеют смысла? |
Это задачка скорее для общего развития, не более. На практике этот код вряд ли будет где-то использоваться.
Изучаю html, js, css несколько недель, следовательно, знаний не очень много. Было бы очень интересно посмотреть, как приведенную выше задумку можно реализовать. Буду благодарен за любые советы/ответы. |
Понятно. Ну так решать задачи нужно привязанные к реалиям, а не нечто пространное. Сервер будет хранить дату регистрации как DATETIME. Окончании регистрации при этом хранить не нужно серверу, ему необходимо в таком случае хранить установленный период в днях. По этим двум параметрам можно получить и дату окончания, и проверить скоро ли она наступит, и отправить письмо пользователю за день до ее окончания. Для этого и SQL, и серверный язык имеют набор функций для работы с датой/временем.
JS не исключение, в нем тоже есть инструментарий для подобных операций - объект Date. В реальности сервер вернул бы дату регистрации и ее период определенный конфигураций, а никак не набор месяцев и годов как у вас представлено. Посредством объекта Date и нужно производить расчет на клиенте. Но данные типа дата/время, это особый тип, который еще связан и с пространством даже а рамках шарика нашего. Сайт будет работать по времени сервера для всех пользователей, включая и тех кто западнее его, и кто восточнее. Если клиенту передать время регистрации, которое соответствует времени сервера, то расчеты на клиенте будут верны только для тех пользователей, у которых часовой пояс равен поясу определенному для сервера. А для клиентов со смещением от него будет ошибка, и чем далее смещение, тем грубее ошибка, в смысле рассчитанного периода. Чтобы этой ошибки не возникало, клиент должен производить расчеты по времени клиента, а сервер для этого должен отдавать клиенту не локальное время регистрации, а ее UTC представление. Есть еще один способ, это передача клиенту времени регистрации по локальному времени сервера и смещение временной зоны сервера (от GMT). У сервера смещение к западу будет отрицательными, а к востоку положительными, на клиенте наоборот - к востоку отрицательные, к западу положительные. Разница смещения сервера и клиента позволит получить на клиенте как локальное время, так и отображать время и сервера. Вот такие задачи решать, и не с абстрактными цифрами напоминающими год, а с временными метками и посредством объекта Date, это была бы польза. А набор цифр и названий месяцев, было бы уместно для задачи "Календарь", хотя и для него нужны были бы только названия месяцев, для локализации. |
<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>
|
<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 expDate=new Date(e_year, opts1.indexOf(e_month), e_date).getTime()
per.onclick=function(){alert(Math.floor((expDate-Date.now())/86400000))}
}
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>
|
Всем спасибо, theKingOfJava отдельная благодарность.
|
| Часовой пояс GMT +3, время: 00:55. |