Динамическое добавление div в таблицу, по checkbox
Доброго времени суток, друзья. Возникла необходимость динамического добавления div контейнеров в ячейки таблицы, по событию checkbox.
Есть таблица, шесть checkbox'ов и столько же div контейнеров: <html> <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </html> <div id="1" style="display: none"> <input class="i1" type="text" name="name" /> </div> <div id="2" style="display:none"> <input class="i2" type="text" name="name" /> </div> <div id="3" style="display: none"> <input class="i3" type="text" name="name" /> </div> <div id="4" style="display: none"> <input class="i4" type="text" name="name" /> </div> <div id="5" style="display: none"> <input class="i5" type="text" name="name" /> </div> <div id="6" style="display: none"> <input class="i6" type="text" name="name" /> </div> <input type="checkbox" id="c1" name="option1" value="a2"> <input type="checkbox" id="c2" name="option2" value="a2"> <input type="checkbox" id="c3" name="option3" value="a2"> <input type="checkbox" id="c4" name="option4" value="a2"> <input type="checkbox" id="c5" name="option5" value="a2"> <input type="checkbox" id="c6" name="option6" value="a2"> Подскажите как реализовать появление divov в ячейках таблицы последовательно, то есть если выбран чекбокс 1-3-5 в ячейках таблицы они появляются именно в такой последовательности, при снятии чекбоксов из ячеек пропадают, чтоб была возможность выбрать другие, которые в свою очередь так же последовательно появляются в ячейках (td) и.т.д Может проще в inner генерировать код... Вообщем понятия не имею как реализовать. В Js очень слаб, спасибо. |
AlexOk,
Цитата:
Дивы должны появляться в таблице по мере выбора чекбоксов или в какой-то другой определенный момент? Что должно происходить при снятии какого-то чекбокса? |
При клике на чекбокс, форма появляется в первой ячейке, при нажатии следующего чекбокса в следующей итд. При снятии галочки с чекбокса форма, которая ему соответствует исчезает с экрана. Задумка такая, может как-то по другому можно реализовать? Спасибо
|
Цитата:
|
Нет задачи, есть моя задумка. Вообщем, у меня 6ть div контейнеров каждый со своей формой для ввода (допустим как в примере). Есть html страничка поделённая на две равные части. Левая часть содержит в себе 6ть чекбоксов каждому из которых соответствует своя форма для ввода при нажатии динамически появляются формы (из примера) в том порядке в котором их нажимают. 3и в ряд, далее переход на следующую строку. При этом может быть выбран один чекбокс, два, четыре итд. соответственно при снятии галочек форма которая соответствует чекбоксу исчезает. Последнюю часть не знаю как реализовать. Спасибо
|
AlexOk,
а что мешает разместить checkbox и div сразу в ячейках таблицы и тогда никакого js для скрытия и показа не нужно будет, только css |
Чекбоксы списком в другой части экрана
|
AlexOk,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td :checked + div {
display: block;
}
td div {
display: none;
}
</style>
</head>
<body>
<table>
<tr>
<td> <input type="checkbox" id="c1" name="option1" value="a2">
<div id="1">
<input class="i1" type="text" name="name" />
</div></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
|
рони,у меня на самом деле формы там не однострочные, это я тут для примера состряпал. Я реализовал, что-то похожее с display, делал через JS и с чекбоксами которые расположил в другом месте экрана. Проблема в том, что когда делаешь при помощи css - формы появляются в том месте где они спрятаны (что логично). И это выглядит не очень, кода скажем нажат чекбокс, который открывает форму нижней строки таблицы, то пространство в котором скрыты остальные div'ы никуда не исчезает, открывается нижняя форма, а над ней белая простыня...
Вот и подумал, что нужно как-то динамически реализовать, чтоб формы в порядке кликов появлялись в таблице и так же оттуда исчезали при снятии галок. Опять же, если есть какой-то более простой буду очень признателен. Спасибо |
AlexOk,
какая связь между таблицей и div Цитата:
|
| Часовой пояс GMT +3, время: 19:44. |