나는 말도 안되는 말을하지 않으며, 코드는 직접 게시 할 것입니다.
<html> <head> <title> 테이블 </title> </head> <body> <테이블 테두리 = 1> <thead> <td> 이름 </td> 성 </td> <td> </ td> </tr> <thead> <tbody id = tb> <l id = 1st> </td> <td> Three </td> <td> <입력 유형 = 버튼 값 = onclick = add ()> <입력 유형 = 버튼 값 = del onclick = del (this)> </td> </tbody> </body> </html> </html> </html> script> function add () {var trobj = document .CreateElement (trobj.id) gettime (); > </td> <td> <입력 유형 = '버튼'값 = 'add'onclick = 'add ()'> <입력 유형 = '버튼'value = 'del'onclick = 'del (this)'> < /td>; getElementById (tb).} function del (var trum = obj.parentnode.id); removeChild (trobj);} </script>위의 코드에서는 테이블이 먼저 다음 -UP 작업을 용이하게하기 위해 THEAD 및 TBODY 태그를 추가합니다.
예제에는 첫 번째 이름의 첫 번째 열, 두 번째 열은 작전 열로 세 번째 열이 있습니다.
작동 열에는 두 개의 작업이 포함되어 있으며, 하나는 양식에 선을 추가하고 다른 하나는 현재 줄을 삭제하는 것입니다. 추가 및 삭제 라인의 작업은 두 개의 버튼에 묶여 있으며 버튼을 클릭하면 해당 추가/ 삭제 행 조작이 트리거됩니다.
추가 방법 함수 {var trobj = createelement (trobj.id); <입력 이름 = 'lastName'/> </td> <td> <입력 유형 = '버튼'값 = 'add'onclick = 'add ()'> <입력 유형 = 'value ='del 'onclick ='del (this) '> </td>;첫 번째 줄은 TR 요소, 즉 테이블 라인을 만드는 것입니다.
두 번째 줄에서 trObj.id = new Date().getTime();
세 번째 줄, trObj.innerHTML = <td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'>
<input type='button' value='Del' onclick='del(this)'></td> ; innerhtmml 속성을 통해 추가 할 내용입니다.
네 번째 줄, document.getElementById(tb).appendChild(trObj);
function del (obj) {var trum = obj.parentnode.parentnode.id;매개 변수는 삭제 방법으로 전달됩니다.이 매개 변수는 삭제 방법으로 전달됩니다. 이것이 위치한 곳.
첫 번째 줄에서 var trId = obj.parentNode.parentNode.id ;
두 번째 줄에서는 var trObj = document.getElementById(trId);
세 번째 줄에서는 document.getElementById(tb).removeChild(trObj);
위의 코드는 기본적으로 동적 기부금 미터 증가 및 삭제 라인의 기능을 인식하지만 코드에는 결함이 있습니다.
1 표 1 증가 전후에 테이블의 너비가 변경됩니다.
증가하다
증가하다
증가 후 양식의 형태가 더 넓어집니다.
2 중국어로 된 브라우저의 기본 페이지가 중국어로 장식 된 것으로 보입니다.
정상적으로 표시되기 전에 페이지 인코딩 형식을 수정하려면 문자 인코딩을 설정해야합니다.