HTML+CSS+JavaScript

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

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

<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>

я знаю, что волшебной палочки не бывает...вначале думала что покажу упрощенный вариант таблицы, а 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>

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

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

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

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

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

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

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

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]

<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>

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

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

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

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

Если не имеете ничего против 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. Код не тестировал, потому возможно, где-то будет ошибка. Надеюсь поможет.