Вставка строки в HTML-таблицу в FORM с использованием Javascript

Я пытаюсь добавить строку в таблицу, расположенную в форме с помощью javascript. Код работает, когда он находится за пределами < формы> теги, но как только код окружен < form>, добавленные строки будут отображаться в течение нескольких миллисекунд, а затем исчезнуть.Вставка строки в HTML-таблицу в FORM с использованием Javascript

Вложенный код был протестирован на Firefox и Mozilla с теми же результатами. Если я удалю < форму> теги, код отлично работает. Любой идеал, почему < form> теги вызывают перезагрузку и делают добавленные строки исчезающими?

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> 

<script> 
function addTableRow() { 

    var len = $('#vendorstbl tr').length 
    var table = document.getElementById("vendorstbl"); 
    var row = table.insertRow(len); 
    var cell0 = row.insertCell(0); 
    var cell1 = row.insertCell(1); 
    cell0.innerHTML = "<select id='test"+len+"'><option name='test"+len+"'>Apple</option><option name='test"+len+"''>Sony</option></select>"; 
    cell1.innerHTML = "<input type='text' size='25' id='product"+len+"' name='product"+len+"'' value='Enter Data'>"; 
} 
</script> 

<html> 
<body> 
    <h3>Adding Row To Table Test:</h3> 

    <form> 
     <table class='add' id='vendorstbl'> 
     <tr><th>Vendor</th><th>Product</th></tr> 
     </table> 
     <button onclick='addTableRow()'>Add Row</button> 
    </form> 
</body> 
</html>

источник

2014-08-28 user2578083

Используйте '' кнопка типа, чтобы предотвратить формы должны быть представлены, или поместить кнопку вне формы. Совет: передайте '-1', чтобы вставить методы, затем элемент автоматически добавляется в конец строки/ячейки. – Teemu

Спасибо, что сработало. – user2578083

Считаете ли вы использование директивы AngularJS для достижения этой цели? Простой ng-повтор с некоторым форматированием выполнит это только в нескольких строках кода.

<table> 
    <tr ng-repeat="person in people" ng-class="rowClass(person)"> 
     <td>{{ person.name }}</td> 
    </tr> 
</table>

Пример: http://jsfiddle.net/xEyJZ/
Источник: «Кнопка» = https://docs.angularjs.org/api/ng/directive/ngRepeat

источник

2014-08-28 14:34:40 Andrew

Вставка строки в HTML-таблицу в FORM с использованием Javascript

ответ

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