Javascript를 사용하여 FORM 내 HTML 테이블에 행 넣기

javascript를 사용하여 양식에있는 테이블에 행을 추가하려고합니다. 이 코드는 < 양식> 태그 외부에있을 때 작동하지만 코드가 < 양식>으로 둘러싸여지면 추가 된 행이 몇 밀리 초 동안 팝업 된 다음 사라집니다.Javascript를 사용하여 FORM 내 HTML 테이블에 행 넣기

첨부 코드는 Firefox와 Mozilla에서 동일한 결과가 테스트되었습니다. < 양식> 태그를 제거하면 코드가 올바르게 작동합니다. < 양식> 태그가 다시로드되어 추가 된 행이 사라지는 이유가 이상적입니까?

<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 지시문을 사용해 보셨습니까? 몇 가지 서식을 사용하면 간단한 몇 줄의 코드에서이를 수행 할 수 있습니다.

<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

Javascript를 사용하여 FORM 내 HTML 테이블에 행 넣기

답변

관련 문제