<html>
<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>
</html>