Динамическое добавление 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 Цитата:
|
рони, вот корявенький живой пример для понимания моих запутанных мыслей, помогите мне их распутать)
<html>
<head>
<title> </title>
</head>
<body>
<li>
<label>check1</label>
<input onclick="show('1')" type="checkbox" id="c1" name="option1" value="a2">
</li>
<li>
<label>check2</label>
<input onclick="show('2')" type="checkbox" id="c2" name="option2" value="a2">
</li>
<li>
<label>check3</label>
<input onclick="show('3')" type="checkbox" id="c3" name="option3" value="a2">
</li>
<li>
<label>check4</label>
<input onclick="show('4')" type="checkbox" id="c4" name="option4" value="a2">
</li>
<li>
<label>check5</label>
<input onclick="show('5')" type="checkbox" id="c5" name="option5" value="a2">
</li>
<li>
<label>check6</label>
<input onclick="show('6')" type="checkbox" id="c6" name="option6" value="a2">
</li>
<table>
<tr>
<td>
<div id="1" style="display: none">
<li><label>Input1</label></li>
<li><input class="i1" type="text" name="name" /></li>
</div>
</td>
<td>
<div id="2" style="display:none">
<li><label>Input2</label></li>
<li><input class="i2" type="text" name="name" /></li>
</div>
</td>
<td>
<div id="3" style="display: none">
<li><label>Input3</label> </li>
<li><input class="i3" type="text" name="name" /></li>
</div>
</td>
</tr>
<tr>
<td>
<div id="4" style="display: none">
<li><label>Input4</label></li>
<li><input class="i4" type="text" name="name" /></li>
</div>
</td>
<td>
<div id="5" style="display: none">
<li><label>Input5</label></li>
<li><input class="i5" type="text" name="name" /></li>
</div>
</td>
<td>
<div id="6" style="display: none">
<li><label>Input6</label></li>
<li><input class="i6" type="text" name="name" /></li>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function show(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
</body>
</html>
Вот пример, нажмите скажем чекбокс1 и любой чекбокс со следующей строки или чекбосы 3 и 4. Нужно чтобы вне зависимости от порядка в котором выбираешь чекбоксы (не обязательно 1-2-3, например 3-4-6) формы появлялись по порядку - сначала в первой строке, если после выбранного 3его чекбокса выбрать четвертый, то соответственно 4я форма должна появиться на следующей строчке. |
AlexOk,
я пас |
рони, это хоть как-нибудь реализуемо?)) Куда копать?
Спасибо за участие) |
AlexOk,
реализуемо осталось только понять чего вы хотите, и li внутри div ... без переводчика сложновато ... |
Знаю :(
Просто хочу, чтоб вне зависимости от того какие чекбоксы выбраны (3-5-6), формы привязанные к чекбоксу появлялись последовательно (построчно) |
AlexOk,
<html>
<head>
<title> </title>
<style type="text/css">
.tab{
width: 300px;
}
.tab > div{
float: left;
width: 100px;
}
.tab > div input{
width: 100%;
}
</style>
</head>
<body>
<li>
<label>check1</label>
<input onclick="show('1')" type="checkbox" id="c1" name="option1" value="a2">
</li>
<li>
<label>check2</label>
<input onclick="show('2')" type="checkbox" id="c2" name="option2" value="a2">
</li>
<li>
<label>check3</label>
<input onclick="show('3')" type="checkbox" id="c3" name="option3" value="a2">
</li>
<li>
<label>check4</label>
<input onclick="show('4')" type="checkbox" id="c4" name="option4" value="a2">
</li>
<li>
<label>check5</label>
<input onclick="show('5')" type="checkbox" id="c5" name="option5" value="a2">
</li>
<li>
<label>check6</label>
<input onclick="show('6')" type="checkbox" id="c6" name="option6" value="a2">
</li>
<div class="tab" >
<div id="1" style="display: none">
<label>Input1</label>
<input class="i1" type="text" name="name" />
</div>
<div id="2" style="display:none">
<label>Input2</label>
<input class="i2" type="text" name="name" />
</div>
<div id="3" style="display: none">
<label>Input3</label>
<input class="i3" type="text" name="name" />
</div>
<div id="4" style="display: none">
<label>Input4</label>
<input class="i4" type="text" name="name" />
</div>
<div id="5" style="display: none">
<label>Input5</label>
<input class="i5" type="text" name="name" />
</div>
<div id="6" style="display: none">
<label>Input6</label>
<input class="i6" type="text" name="name" />
</div>
</div>
<script type="text/javascript">
function show(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
</body>
</html>
|
Спасибо огромное! Представлял себе все несколько ужаснее...
Скачал книжек буду учить js, html, css. Спасибо |
| Часовой пояс GMT +3, время: 17:22. |