HTML+CSS+JavaScript

Прошу помощи, объяснить с помощью чего и как сделать так, чтобы по нажатию кнопки(или ссылки) "Добавить еще" появлялись еще 3 поля для ввода данных. Но чтобы это происходило без перезагрузок страницы.
Для полного понятия чего я хочу, прикрепил картинку

<table border=1 id=educ> <tr> <th colspan=3>Среднее образование</th> </tr> <tr> <td>Год окончания</td> <td>Средняя школа</td> <td>Успеваемость</td> </tr> <tr> <td colspan=3><a onclick=insert() href=#>Add one more</a></td> </tr> </table>

<script type="text/javascript">             function insert(){             // обращаемся к нашей таблице с Id'ом educ                 myT = document.getElementById('educ');             // создаем переменную, хранящую количество строк нашей таблицы                 myTRL = myT.rows.length;             // вставляем строку в нашу таблицу                 newRow = myT.insertRow(myTRL-1);             // вставляем в только что вставленную строку ячейку                 newCell = newRow.insertCell(0);             // добавляем туда контент с помощью либо innerHTML, либо innerText                 newCell.innerHTML = "TEXT";                 newCell = newRow.insertCell(1);                 newCell.innerHTML = "TEXT";                 newCell = newRow.insertCell(2);                 newCell.innerHTML = "TEXT";             }         </script>

Ну, вот, пожалуйста, где-то так=)

Спасибо большое!! Супер!
Только как теперь сделать кнопку, "убрать поле"
И как лучше это все заносить в базу?
У меня построенно так.
Первая строка с 3 полями постоняная, её нелья убрать

<form name='form' method='post' action='obrabotchik' > <input name='god'  type='text'  size='39' > <input name='shkola'  type='text'  size='39' > <input name='yspevaemost'  type='text'  size='39' > <input type="submit" name="submit" id="submit"  value="Занести"> </form>

Данные летят в obrabotchik.php
Там я их проверяю на существование

if (isset($_POST['god']))      {$god = $_POST['god']; if ($god == '') {unset($god);}} if (isset($_POST['shkola']))      {$shkola = $_POST['shkola']; if ($shkola == '') {unset($shkola);}} if (isset($_POST['yspevaemost']))      {$yspevaemost = $_POST['yspevaemost']; if ($yspevaemost == '') {unset($yspevaemost);}}

После чего заношу в базу

if (isset($god) && isset($shkola) && isset($yspevaemost)) { $res1 = mysql_query ("INSERT INTO srednee (god,shkola,yspevaemost) VALUES ('$god','$shkola','$yspevaemost')");  } else { echo "Ошибка"; }

Теперь такие вопросы:
1. Как сделать такую же кнопку как "добавить поле" только теперь наоборот "Убрать поле".
2. Как лучше организовать добавление данных в базу, когда появляются дополнительные 3 поля ?
3. Когда человек будет жать "Добавить поля" следовательно этим полям необходимо задать name='god1' name='shkola1' name='yspevaemost1'
Человек еще нажал кнопку и поля должны изменить name на 1 больше, тоесть
name='god2' name='shkola2' name='yspevaemost2'
Как это реализовать?
4. Как сделать ограничение на максимальное добавление 3 строк ?
5. И самый главный вопрос, как их занести в базу?)) Ведь у полей будет разный name.
Вообщем как-то так... сформулировать не особо могу, то что хочу))

1.

function del(){                  myT = document.getElementById('educ');                  myTRL = myT.rows.length;              // удаляем строку нашей таблицы                 if(myTRL > 3)// своеобразная защита от удаления всей таблицы вообще                     newRow = myT.deleteRow(myTRL-2);              else return;                          }

2. С помощью массива данных.
3. Не надо так делать. Нужно просто прописать имена полей с квадратными скобками в конце, например:

<form name='form' method='post' action='obrabotchik' >  <input name='god[]'  type='text'  size='39' >  <input name='shkola[]'  type='text'  size='39' >  <input name='yspevaemost[]'  type='text'  size='39' >  <input type="submit" name="submit" id="submit"  value="Занести">  </form>

, чтобы РНР понял, что это всё надо обработать как единый массив.

4. Насчёт этого вопроса... JS - коварен тем, что это язык клиентских сценариев, а следовательно его можно изменить, отрубить и так далее. То есть, если есть уверенность, что это можно и нужно реализовывать на JS, то идея такая...: создать скрытое поле и при каждом добавлении новой строки увеличивать значение этого поля на 1. Перед добавлением новой строки производить проверку хранящегося в хиддэне значения, и если оно больше трёх...return, alert(), close(), fire_processor()... вариантов масса=)

Насчёт серверной же стороны, мы знаем, что ща придут массивы данных, они будут, допустим, все одинаковой длины, так? Посчитаем количество ячеек какого-то одного массива и если оно больше 3...

if(count($_POST['god']) > 3){   ##   ## меганаказание   ## }

5. Этот вопрос с наскоку не берётся, но заноситься всё будет целым массивом))) MySQL'щики помогут)

Вообщем блин, думаю надо что-то поще искать мне.
Как говорили, просто скрыть поля, а по нажатию открыть их

<script type="text/javascript"> function showHint(id,s) {   var sdiv=document.getElementById(id);   if(s)     sdiv.style.display='block';   else     sdiv.style.display='none'; } </script>

<div id="1" style=" visibility:hidden;"> <input name="god" class="validate[length[0,20],custom[onlyNumber]] text-input" type="text" size="10" > </div>

Потому что с этими массивами точно потом запутаюсь...
Как их принимать POST -ом незнаю, как их потом заносить в переменную тоже, и в базу как их заносить? Пока не закончаться, через цикл?
И еще проблема возникла по пути, у меня в полях стоит вот такое класс

<input name="god" class="validate[length[0,20],custom[onlyNumber]] text-input" type="text" size="10" >

Это java script тоже, который проверяет длину строки, и запрет на специальные символы и т.д.
Он не работает наверно class='' почему то не читает, когда заношу поле с ним вот сюда:

newCell.innerHTML = "<td align='center' valign='middle' class='t9'><p align='center'><input name='god[]' class='validate[length[0,20],custom[onlyNumber]] text-input' type='text' size='10'></p></td> ";                  newCell = newRow.insertCell(1);

И еще беда, то что у меня такая таблица не одна и я так понял что надо делать несколько таких java scriptov с

myT = document.getElementById('educ');

myT = document.getElementById('educ2');

myT = document.getElementById('educ3');

myT = document.getElementById('educ4');