Скрытие И Отображение Таблицы

bsi

New member
01.06.2013
3
0
#1
Прошу помочь модифицировать представленный код так, чтобы при выборе в выпадающем списке "Без ограничений" таблица (с заголовком) была скрыта, при других вариантах вновь появлялась на экране и добавлялось бы указанное к-во строк. Всем ответившим, спасибо.
Код:
<body>
<select onchange="change(this.value);">
<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>

<table border="1">
<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>

<script>
function getTr () {
var tr = document.createElement('tr');

var html = [
'<td>',
'<input type="text">',
'</td>',
'<td>',
'<input type="text">',
'</td>',
'<td>',
'<input type="text">',
'</td>',
'<td>',
'<input type="text">',
'</td>'].join('');

tr.innerHTML = html;
return tr;
}


var tb = document.querySelector('#dynamic')
function change (v) {
console.log(v);

if (v == 0) {
Array.prototype.forEach.call(tb.children, function (tr) {
tr.style.display = 'none';
});
} else {
for (var i = 0; i < v; i++) {
tb.appendChild(getTr());
}
}
}
</script>
</body>
Во вложении образец как должно работать, (это я делал в LiveCycle FormDesigner), хотелось бы подобное в HTML.