Нажимаем кнопку - добавляется строка.
К примеру есть таблица:
<table name='tab1' border='1'align='left'> <tr> <td><input type='text' name='1'></td> <td><input type='checkbox' name='2'></td> <td><input type='textarea' name='3'></td> </tr> </table> И есть кнопочка: <input type='button' value='Ещё'> Как сделать так, чтобы при нажатии на кнопочку "Ещё", в таблице добавлялась ещё одна строка аналогичная той что уже есть? Выглядит достаточно просто, но мои скромные знания языка не позволяют этого сделать. Помогите, пожалста.=) |
var node = document.createElement('td');
node.innerHTML = 'Содержимое';
document.tabl.getElementsByTagName('tr')[0].appendChild(node);
|
Вставил ваш код так:
<script language="JavaScript">
function add(){
var node = document.createElement('td');
node.innerHTML = "<input type='text' name='1'>";
document.tabl.getElementsByTagName('tr')[0].appendChild(node);
}
</script>
И использовал так: <table name='tabl' border='1'align='left'> <tr> <td><input type='text' name='1'></td> </tr> </table> <input type='button' value='Ещё' onClick='add();'> Компилятор ругается: "Ошибка: 'document.tabl' - есть null или не является объектом" Спрашивается, где я накосячил?=( |
Эту строку так
<table id='tabl' border='1'align='left'> а ту в которой ошибка, так
document.getElementById('tabl').getElementsByTagName('tr')[0].appendChild(node);
|
Спасибо. В принципе заработало. Единственный минус, что код добавляет TD'шку (на сколько я разобрался в коде). А мне нужна новая строка в таблицу, то есть TR'ка.
|
Так?
<script language="JavaScript">
function add(){
var nodet = document.createElement('tr');
var node = document.createElement('td');
node.innerHTML = "<input type='text' name='1'>";
document.getElementById('tabl').appendChild(nodet);
nodet.appendChild(node);
}
</script> |
Теперь совсем ничего не добавляет и ошибок никаких не выдаёт.
|
Спасибо большое за помощь. Пока с тем что вы написали разбирался, написал немного по-другому.=)
<script language="JavaScript">
function add(){
var addTR = document.getElementById('tabl').insertRow(-1);
var addTD =addTR.insertCell(-1);
addTD.innerHTML = "<input type='text' name='1'>";
}
</script>
|
Как же не работает?
<html>
<head>
<script language="JavaScript">
function add(){
var nodet = document.createElement('tr');
var node = document.createElement('td');
node.innerHTML = "<input type='text' name='1'>";
document.getElementById('tabl').appendChild(nodet);
nodet.appendChild(node);
}
</script>
</head>
<body>
<table id='tabl' border='1'align='left'>
<tr>
<td><input type='text' name='1'></td>
</tr>
</table>
<input type='button' value='Ещё' onClick='add();'>
</body>
</html>
|
Я использую EditPlus как редактор в нём не сработало. В опере работает. Извенити, сразу не проверил.=) В IE'шнике тоже не сработало. Ещё раз спасибо за помощь.
|
чтобы работал код и в Ие надо добавлять так
document.getElementById('tabl').getElementsByTagName('tbody')[0].appendChild(nodet);
|
<div id="area" class = "input_div"><input class="food_input_center" type="text" name="food[0]"/></div>
<div class = "baton_right">
<input class = "baton_klick" type="button" value="+" onclick="add();" />
<input class = "baton_klick" type="button" value="-" onclick="remove();" />
</div>
<script type="text/javascript">
var e = document.getElementById('area');
function add() {
var q = e.getElementsByTagName('input');
if (q.length < 15) {
var c = document.createElement('input');
c.type = 'text';
c.name = 'food[' + e.getElementsByTagName('input').length + ']';
c.className = 'food_input_center';
e.appendChild(c);
}
}
function remove() {
var q = e.getElementsByTagName('input');
if (q.length > 1) {
q[q.length - 1].parentNode.removeChild(q[q.length - 1]);
}
}
</script>
мой кусок) |
| Часовой пояс GMT +3, время: 23:33. |