02.11.2016, 17:57
|
|
Интересующийся
|
|
Регистрация: 02.11.2016
Сообщений: 20
|
|
|
Динамическое добавление 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, 02.11.2016 в 18:05.
|
|
02.11.2016, 19:03
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
AlexOk,
|
Сообщение от AlexOk
|
|
Подскажите как реализовать появление divov в ячейках таблицы последовательно, то есть если выбран чекбокс 1-3-5 в ячейках таблицы они появляются именно в такой последовательности, при снятии чекбоксов из ячеек пропадают, чтоб была возможность выбрать другие, которые в свою очередь так же последовательно появляются в ячейках (td) и.т.д
|
Не вполне понятно, в какой момент вы собираетесь заполнять таблицу. Поначалу все чекбоксы не выбраны. Потом пользователь произвольно выбирает один чекбокс, другой и т.д.
Дивы должны появляться в таблице по мере выбора чекбоксов или в какой-то другой определенный момент? Что должно происходить при снятии какого-то чекбокса?
|
|
02.11.2016, 20:05
|
|
Интересующийся
|
|
Регистрация: 02.11.2016
Сообщений: 20
|
|
|
При клике на чекбокс, форма появляется в первой ячейке, при нажатии следующего чекбокса в следующей итд. При снятии галочки с чекбокса форма, которая ему соответствует исчезает с экрана. Задумка такая, может как-то по другому можно реализовать? Спасибо
|
|
02.11.2016, 20:20
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,071
|
|
|
Сообщение от AlexOk
|
|
может как-то по другому можно реализовать?
|
какая задача изначально? |
|
02.11.2016, 20:33
|
|
Интересующийся
|
|
Регистрация: 02.11.2016
Сообщений: 20
|
|
|
Нет задачи, есть моя задумка. Вообщем, у меня 6ть div контейнеров каждый со своей формой для ввода (допустим как в примере). Есть html страничка поделённая на две равные части. Левая часть содержит в себе 6ть чекбоксов каждому из которых соответствует своя форма для ввода при нажатии динамически появляются формы (из примера) в том порядке в котором их нажимают. 3и в ряд, далее переход на следующую строку. При этом может быть выбран один чекбокс, два, четыре итд. соответственно при снятии галочек форма которая соответствует чекбоксу исчезает. Последнюю часть не знаю как реализовать. Спасибо
Последний раз редактировалось AlexOk, 02.11.2016 в 20:37.
|
|
02.11.2016, 20:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,071
|
|
|
AlexOk,
а что мешает разместить checkbox и div сразу в ячейках таблицы и тогда никакого js для скрытия и показа не нужно будет, только css
|
|
02.11.2016, 20:44
|
|
Интересующийся
|
|
Регистрация: 02.11.2016
Сообщений: 20
|
|
|
Чекбоксы списком в другой части экрана
|
|
02.11.2016, 20:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,071
|
|
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>
|
|
02.11.2016, 21:21
|
|
Интересующийся
|
|
Регистрация: 02.11.2016
Сообщений: 20
|
|
|
рони,у меня на самом деле формы там не однострочные, это я тут для примера состряпал. Я реализовал, что-то похожее с display, делал через JS и с чекбоксами которые расположил в другом месте экрана. Проблема в том, что когда делаешь при помощи css - формы появляются в том месте где они спрятаны (что логично). И это выглядит не очень, кода скажем нажат чекбокс, который открывает форму нижней строки таблицы, то пространство в котором скрыты остальные div'ы никуда не исчезает, открывается нижняя форма, а над ней белая простыня...
Вот и подумал, что нужно как-то динамически реализовать, чтоб формы в порядке кликов появлялись в таблице и так же оттуда исчезали при снятии галок. Опять же, если есть какой-то более простой буду очень признателен. Спасибо
|
|
02.11.2016, 21:26
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,071
|
|
AlexOk,
какая связь между таблицей и div
|
Сообщение от AlexOk
|
|
если выбран чекбокс 1-3-5 в ячейках таблицы они появляются именно в такой последовательности,
|
таблицу нарисуйте с этим вариантом
|
|
|
|
