HTML+CSS+JavaScript

Подскажите плиз

Есть таблица вида:

<table border=1> <tr> <td>Поле1</td> <td>Поле2</td> <td><a href=''>Добавить</a></td> <td>Поле3</td> </tr> <tr> <td rowspan=2>Значение1</td> <td colspan=2>Поле ввода</td> <td rowspan=2>Значение3</td> </tr> <tr> <td colspan=2>Поле ввода</td> </tr> </table>

По нажатию на ссылку "добавить" должно добавиться "Поле ввода" соблюдая структуру таблицы
Помогите осуществить, я совсем уже потеряла надежду....(((((((

Хотелось бы более конкретного описания того,что Вам нужно:по этой таблице ничего не понять.Видимо,Вам нужна форма для отправки введенных данных на сервер?

<form method="post" action="../admin/forma.php"> <p>Значение 1 <input type="text" name="first" size="10"></p> <p>Значение 2 <input type="text" name="second" size="10"></p> <input type="submit" name="Submit" value="Отправить"> <input type="reset" name="Reset" value="Очистить форму"> </form>

Более подробно Вы можете прочитать здесь http://www.php.su/articles/?cat=examples&page=069 и здесь http://htmlbook.ru/html/form.

То, что у Вас было ДО нажатия на ссылку "добавить", мы теперь знаем.

Напишите ещё HTML-код того, что Вы хотите увидеть на странице ПОСЛЕ нажатия на ссылку "добавить".

И проблема Ваша решится, я уверен - кто-нить (может, и я) Вам обязательно поможет (когда будет знать - что именно Вам надо получить).

for Агамемнон: абстрагируйтесь от правил, то что я не привела полный код страницы, не значит что у меня нет <form и т.д


Совершенно верно, таблица представляет собой форму, для заполнения данных <input type=text>
До

<table border=1> <tr> <td>Поле1</td> <td>Поле2</td> <td><a href=''>Добавить</a></td> <td>Поле3</td> </tr> <tr> <td rowspan=2>Значение1</td> <td colspan=2><input type=text></td> <td rowspan=2>Значение3</td> </tr> <tr> <td colspan=2><input type=text></td> </tr> </table>

После

<table border=1> <tr> <td>Поле1</td> <td>Поле2</td> <td><a href=''>Добавить</a></td> <td>Поле3</td> </tr> <tr> <td rowspan=3>Значение1</td> <td colspan=2><input type=text></td> <td rowspan=3>Значение3</td> </tr> <tr> <td colspan=2><input type=text></td> </tr> <tr> <td colspan=2><input type=text></td> </tr> </table>

Т.е после нажатия "добавить" добавляется ячейка в которой в свою очередь прописан "<input>".

З.Ы: ячеек можно добавлять сколь угодно (без огранчиений)
З.З.Ы: Изменяемые параметры при добавлении я выделила жирным шрифтом

Я уже искала по Поиску, нашла что это без DHTML не осуществить, нашла примерную схему добавления полей, но она совершенно не подходит для добавления конкретных ячеек таблицы..., мне нужно чтобы добавлялись определенные ячейки, но структура таблицы не искажалась:(((((((

Если не имеете ничего против jQuery.ю тогда вот что...

$(function () {     $('table .add').click(function () {         // добавляем новую строку вниз таблицы         $(this).parents('table').append('<tr><td colspan=2><input type=text></td></tr>');         // пересчитываем количество строк для rowspan         var rowsNumber = $(this).parents('table').find('tr').size() - 2;         // изменяем параметр rowspan для ячейки         $(this).parents('table').find('.firstCol').attr('rowspan', rowsNumber);         return false;     }); });

Но в вашем коде нужно сделать пару изменений.
Во-первых, <td rowspan=3>Значение1</td> нужно задать какой-нибудь класс. Я прописал .firstCol , можете изменить, если хотите.
во-вторых, ссылке "добавить" тоже нужен класс. Я прописал так <a href='' class='add'>Добавить</a>

P.S. Код не тестировал, потому возможно, где-то будет ошибка. Надеюсь поможет.

Почему обязательно jQuery? Я не пртив него, но против использовать его только ради решения этой задачи. Есть в JS объект table и методы работы с ним, и они не так уж и сложны, чтобы отдавать предпочтение jQuery.

Если у вас, к примеру, есть ячейка <td id="td0"> , то элементы в неё добавляются так:

var inp=document.createElement('input'); inp.setAttribute("type","text"); document.getElementById("td0").appendChild(inp);

Такой смысл, в общем. Если нужно добавлять много элементов во много элементов, используете циклы.

<script> function F () { var str = document.getElementById ('mStr'), tbl = str.parentNode; str.cells [0].rowSpan++; str.cells [2].rowSpan++;  var row = tbl.insertRow (-1), cel = row.insertCell (-1); cel.colSpan = 2; var inp = document.createElement ('input'); cel.appendChild (inp); return false; } </script> <table border=1>  <tr>    <td>Поле1</td>    <td>Поле2</td>    <td><a href='#' onclick="return F ()">Добавить</a></td>    <td>Поле3</td>  </tr>  <tr id="mStr">    <td rowspan=2>Значение1</td>    <td colspan=2><input type=text></td>    <td rowspan=2>Значение3</td>  </tr>  <tr>    <td colspan=2><input type=text></td>  </tr>  </table>

for AЯ, ваш код приминительно к конкретной задаче, подходит, НО изменим структуру таблицы, и все поплыло:

<table border=1> <tr> <td>Поле1</td> <td>Поле2</td> <td><a href='#' onclick="return F ()">Добавить</a></td> <td>Поле3</td> <td>Поле n (сколь угодно таких столбцов)</td> </tr> <tr id="mStr"> <td rowspan=2>Значение1</td> <td><input type=text></td> <td><input type=text></td> <td rowspan=2>Значение1</td> <td rowspan=2>Значение n (сколь угодно таких столбцов)</td> </tr> </table>

Вариант очень компактный, еслиб была возможность сделать универсальным JS скрипт, было бы замечательно...
З.Ы: Стоит учесть, что это все таки форма для отправки, и добавочные поля должны как то именоваться например name[$i]

inp.setAttribute("name","some_name");

>"еслиб была возможность сделать универсальным JS скрипт, было бы замечательно..."

Я понял, selma, Вам таки нужна волшебная палочка.
Чтобы махнуть - и ВСЁ само собою сделалось ТАК, как Вам оно захочется СЕГОДНЯ.
А потом - махнуть ещё раз - и чтобы получилось ТАК, как это Вам захочется ЗАВТРА...

Увы, нету её у меня для Вас.

И вряд ли у кого найдётся.

Городить чего-то такое, что может учесть все Ваши извращённые фантазии (настоящие и будущие) - это надо влезть вовнутрь Вашей головы и определить - чего она ещё ВДРУГ придумает :-)
А это, как понимаете, невозможно.

я знаю, что волшебной палочки не бывает...вначале думала что покажу упрощенный вариант таблицы, а JS сработает как надо...но увы...

вобщем структура такая (окончательная):
ДО

<table border=1> <tr> <td>Поле1</td> <td colspan=5>Поле2 <a href='#'>(Добавить строку)</a></td> <td>Поле3</td> <td>Поле n (сколь угодно таких полей)</td> </tr> <tr> <td rowspan=2>Значение1</td> <td><input type=text name=name1[]></td> <td><input type=text name=name2[]></td> <td><input type=text name=name3[]></td> <td><input type=text name=name4[]></td> <td><input type=text name=name5[]></td> <td rowspan=2>Значение1</td> <td rowspan=2>Значение n (сколь угодно таких полей)</td> </tr> </table>

ПОСЛЕ

<table border=1> <tr> <td>Поле1</td> <td colspan=5>Поле2 <a href='#'>(Добавить строку)</a></td> <td>Поле3</td> <td>Поле n (сколь угодно таких полей)</td> </tr> <tr> <td rowspan=3>Значение1</td> <td><input type=text name=name1[]></td> <td><input type=text name=name2[]></td> <td><input type=text name=name3[]></td> <td><input type=text name=name4[]></td> <td><input type=text name=name5[]></td> <td rowspan=3>Значение1</td> <td rowspan=3>Значение n (сколь угодно таких полей)</td> </tr> <tr> <td><input type=text name=name1[]></td> <td><input type=text name=name2[]></td> <td><input type=text name=name3[]></td> <td><input type=text name=name4[]></td> <td><input type=text name=name5[]></td> </tr> </table>

Очень хочу попросить АЯ помочь с реализацией фантазии (крайне обдуманной):)

<script> function F () { var str = document.getElementById ('mStr'), tbl = str.parentNode, row = tbl.insertRow (-1); for (var j = 0, w = str.cells, l = w.length; j < l; j++) if (w [j].rowSpan > 1) w [j].rowSpan++; else {      var cel = row.insertCell (-1), inp = document.createElement ('input');      inp.name = w [j].firstChild.name; cel.appendChild (inp);      } return false; } </script>  <table border=1>    <tr>      <td>Поле1</td>      <td colspan=5>Поле2 <a href='#' onclick="return F ()">(Добавить строку)</a></td>      <td>Поле3</td>   <td>Поле n (сколь угодно таких полей)</td>   </tr>    <tr id="mStr">      <td rowspan=2>Значение1</td>      <td><input type=text name=name1[]></td>      <td><input type=text name=name2[]></td>   <td><input type=text name=name3[]></td>    <td><input type=text name=name4[]></td>    <td><input type=text name=name5[]></td>    <td rowspan=2>Значение1</td>     <td rowspan=2>Значение n (сколь угодно таких полей)</td>   </tr>    </table>

ОГРОМНОЕ СПАСИБО!!! АЯ, ВЫ лучший! что бы я без Вас делала:))))))

SHAME: надо учить матчасть...