Формы, динамическая таблица
Доброго времени суток. Помогите советом новичку (чем пользоваться, где найти).
Допустим, у меня есть электронная библиотека для которой нужно создать список читателей. При входе на хтмл страницу появляется форма для заполнения (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>
|
Царь Леонид,
Я понимаю, но это скорее задание "для себя". Просто придумал задачку и захотел ее решить. Но все же спасибо за ответ. |
| Часовой пояс GMT +3, время: 18:18. |