Прошу Вас помочь в следующем вопросе. Необходимо чтобы после добавления строк в таблицу, не изменялся установленный ранее размер ширины ячеек.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
</head>
<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="5">5</option>
<option value="6">6</option>
</select>
<table border="1">
<thead>
<tr>
<th width=50 scope="col">Поле 1</th>
<th width=100 scope="col">Поле 2</th>
<th width=300 scope="col">Поле 3</th>
<th width=50 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>
Я этих делах ноль, но надо.
Заранее благодарю.