javascript добавить новую строку в таблицу

Я пытаюсь добавить новую строку в таблицу через javascript. Я хочу, чтобы строка была вставлена перед последней строкой, где находится сумма, а также число в метке, которое должно быть увеличено с каждой новой строкой, вставленной в таблицу.javascript добавить новую строку в таблицу

<input type=button value='Add Row' /> 

<table cellspacing=0 cellpadding=4 id="table"> 
<tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text maxlength=2/></td></tr> 
<tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text maxlength=2/></td></tr> 
<tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr> 
</table>

Это код таблицы, я хочу, чтобы она была под номером «номер 2», но до строки суммы. И с каждой новой строкой метка, которая должна быть изменена на номер 3: например, или номер 4 и т. Д. Любая идея, как я могу это сделать. Мне нужно использовать только javascript, и никакие внешние инструменты или jquery не разрешены. Спасибо заранее, Лацьале

источник

2012-01-09 Laziale

Убедитесь, что вы едите tbody элемента в таблице.

var table = document.getElementById('table'); 

var button = document.getElementsByTagName('input')[0]; 

button.onclick = function() { 
    var clone = table.rows[table.rows.length - 2].cloneNode(true); 
    clone.cells[0].firstChild.data = 
     clone.cells[0].firstChild.data.replace(/(\d+):/,function(str,g1) { 
                  return (+g1 + 1) + ':'; 
                 }); 
    table.tBodies[0].insertBefore(clone, table.rows[table.rows.length-1]); 
};

http://jsfiddle.net/Btjg6/

Кроме того, он, вероятно, имеет смысл иметь свой последний ряд в <tfoot> элемент, который изменил бы вещи немного.

button.onclick = function() { 
    var clone = table.rows[table.rows.length - 2].cloneNode(true); 
    clone.cells[0].firstChild.data = 
     clone.cells[0].firstChild.data.replace(/(\d+):/,function(str,g1) { 
                  return (+g1 + 1) + ':'; 
                 }); 
    table.tBodies[0].appendChild(clone); 
};

http://jsfiddle.net/Btjg6/1/

источник

2012-01-09 18:50:11

Спасибо за Ваш ответ, который работает, как я могу видеть, но одна вещь, как я могу использовать код JS при нажатии на кнопку? потому что в форме будет еще одна кнопка, не связанная с добавлением еще одного поля. Могу ли я сделать onclick событие на кнопке и использовать код выше? Спасибо, что помогли мне – Laziale

Лучшее решение будет зависеть от вашей фактической разметки HTML. Знание взаимосвязи между входами и таблицами поможет. –

http://viralpatel.net/blogs/2009/03/dynamically-add-remove-rows-in-html-table-using-javascript.html

Ленивый достаточно, чтобы вставить код

дать номер 1,2,3 .., вы должны создать строки идентификаторов, как 'row1', 'row2'. .

поставить скрытую переменный и увеличивает его значение по строкам вы сгенерированные

источник

2012-01-09 18:40:08 Abhi

javascript добавить новую строку в таблицу

ответ

Смежные вопросы