Добавление строк в таблицу и скрытие таблицы.
Необходимо доработать код так, чтобы все работало от одного (верхнего) выпадающего списка. Если выбрать "Без ограничений", то таблица скрылась, если иначе, то добавлялось, указанное количество строк. Помогите новичку.
<body>
<p><strong>Динамическая таблица.</strong></p>
<!-- Кол-во элементов option и их значения value можно задать произвольно //-->
<select id="rows_setup">
<option value="0">Без ограничений</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="10">10</option>
</select>
<p><p/>
<div id="Tablica" style="display: show;">
<form method="post" action="">
<table width="650" border="1" cellspacing="0" cellpadding="5">
<!-- Заголовки //-->
<thead>
<tr>
<th scope="col">Поле 1</th>
<th scope="col">Поле 2</th>
<th scope="col">Поле 3</th>
<th scope="col">Поле 4</th>
</tr>
</thead>
<!-- Сюда будем добавлять строки //-->
<tbody id="dynamic"></tbody>
</table>
</form>
<script>
/* Навешиваем логику: */
setupTable(
"dynamic", /* ID элемента <tbody> таблицы */
"rows_setup", /* ID элемента <select> для установки кол-ва строк */
{1:"val1", 2:"val2", 3:"val3", 4:"val4"} /* Конфигурация строки таблицы */
);
function setupTable(tableId, selectId, fields) {
var htmlTBody = document.getElementById(tableId),
htmlSelect = document.getElementById(selectId),
rowTpl = document.createElement("TR");
/* Строим шаблон строки таблицы один раз, в дальнейшем будем просто его клонировать */
for(var field in fields) {
if (false === fields.hasOwnProperty(field)) continue;
var TD = document.createElement("TD"),
INPUT = document.createElement("INPUT");
INPUT.name = fields[field] + "[]";
TD.appendChild(INPUT);
rowTpl.appendChild(TD);
}
// Вешаем обработчик на элемент управления кол-вом строк
htmlSelect.onchange = function (e) {
var numRows = htmlSelect.options[htmlSelect.selectedIndex].value;
/* Отслеживаем отрицательные значения а то мало ли какие там значения в option понаставят */
numRows = numRows < 0 ? 0 : numRows;
/* Удаляем те строки которые есть. */
while(htmlTBody.firstChild) htmlTBody.removeChild(htmlTBody.firstChild);
for (var i = 0; i < numRows; i++) {
htmlTBody.appendChild(rowTpl.cloneNode(true));
}
};
}
</script>
</script>
</div>
<p><p/>
<select NAME="TEST" onchange ="myselection()">
<option selected >Скрыть
<option selected >1
<option selected >2
<option selected >3
<option selected >6
<SCRIPT>
function myselection() {
var testnumber;
testnumber=document.all.TEST.selectedIndex
if (testnumber==0)
Tablica.style.display = "none"
else{
Tablica.style.display = "inline";
}
}
</SCRIPT>
</body>
|