기본 JavaScript를 사용하여 동적 테이블 생성(주석이 명확하게 작성됨)

저자：Eve Cole 업데이트 시간：2025-02-07 16:24:02

저는 최근에 우리가 흔히 야수책이라고 부르는 오라일리 책 세 권을 읽었습니다(동창 중 한 사람의 이름이 저와 매우 비슷합니다. ㅋㅋㅋ). 많은 회사에서 책을 사용하기 때문에 기술을 연습하기 위해 항상 샘플을 만들고 싶었습니다. 동적 폼이라 js를 이용해서 동적 폼을 만들어 보려고 했고, firfox 브라우저를 이용해서 디버깅도 해봤는데, 원래는 firbug 플러그인을 사용하는 게 더 나았기 때문에 원래는 작은 함수를 구현하고 싶었거든요. 너무 많은 것을 하고 싶으면 버튼을 클릭하여 행을 추가하세요. 그러면 점점 더 많은 것이 추가되고 점점 더 아름다워집니다. 모두가 함께 배울 수 있도록 소스코드를 게시해 주세요. 궁금한 사항이 있으면 수정해 주시기 바랍니다.

ps: 위에 줄번호가 왜 안 뜨는지 모르겠네요. 메모는 명확하게 작성되어 모두가 함께 배울 수 있습니다.

다음과 같이 코드 코드를 복사합니다.

<머리>

<스타일 유형="텍스트/css">

body{ 배경색:#9CC; 텍스트 정렬:중앙}

테이블{여백:10px 자동;}

tr th { 테두리: 1px 솔리드 #096;}

td{테두리: 1px 솔리드 #096;}

</style>

<스크립트 유형="텍스트/자바스크립트">

/*함수 외부에서는 일부 변수만 선언 가능하며, 이를 호출하고 실행할 수 있는 함수가 없기 때문에 연산 방법을 사용할 수 없습니다. */

//페이지 로딩 시 일회용이므로 선택 상자를 테이블 헤더에 넣습니다.

window.onload = 함수(){

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

var firsttr = document.getElementsByTagName('tr')[0];

var childtd = firsttr.childNodes;

//첫 번째 행과 열에 선택 상자 추가

var inp = document.createElement('input');

inp.type = '체크박스';

//DOM 레벨 2 이벤트 등록

catchEvent(inp,'click',function(){ //다양한 상태를 판단하는 함수를 등록합니다.

if(inp.checked ==true){

모두선택();

}또 다른{

취소선택();

}

});

//catchEvent(inp,'click',allSelect);

//catchEvent(inp,'change',cancelSelect);

childtd[0].appendChild(inp);

}

//행 추가

//var count =0;//계산을 위한 열 추가

함수 addRow(){

//카운트++;

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

var firsttr = document.getElementsByTagName('tr')[0];

var childtd = firsttr.childNodes;

var tr = document.createElement('tr');

var arrtd = 새로운 배열();

var arrinp = 새로운 배열();

for(var i =0;i<childtd.length;i++){

arrtd[i] = document.createElement('td');

arrinp[i] = document.createElement('input');

if(i==0){

arrinp[i].type = '체크박스';

arrinp[i].name = '선택 상자';

}그렇지 않은 경우(i==1){

//arrinp[i] = document.createTextNode(count);

arrinp[i] = document.createTextNode('');

}

arrtd[i].appendChild(arrinp[i]);//입력에도 배열을 추가해야 하는 이유를 생각해 보세요.

tr.appendChild(arrtd[i]);

}

tab.appendChild(tr);

새로운정렬();

}

//삭제 작업

함수 deleteRow(){

var parentTr = new Array();//먼저 선택한 행을 배열에 넣습니다.

var box = document.getElementsByName('selectbox');

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

for(var i = 0;i<box.length;i++){

if(box[i].checked==true){

var parent = box[i].parentNode;

parentTr[i] = parent.parentNode;//이것이 바로 내부에 배치되어 있으면 왜 완전히 삭제되지 않나요? ? 대응이 부족해서일까요?

//tab.removeChild(parentTr);

}

for(var i = 0;i<parentTr.length;i++){ //선택한 모든 항목이 삭제됩니다.

if(parentTr[i]){ //여기서 먼저 null 값인지 확인해야 합니다. null이 아니면 제거하세요. 그렇지 않으면 오류가 보고됩니다.

tab.removeChild(parentTr[i]);

}

새로운정렬();

}

//삭제되면 다시 정렬

함수 newSort(){

var text = new Array();

var child_td = 새로운 배열();

var arr_tr = document.getElementsByTagName('tr');

for(var i = 1;i<arr_tr.length;i++){

child_td[i] = arr_tr[i].childNodes[1];//두 번째 행부터 시작하여 두 번째 열의 모든 노드를 가져옵니다.

if(child_td[i].childNodes[0]){

child_td[i].removeChild(child_td[i].childNodes[0]);

}

text[i] = document.createTextNode(i);

child_td[i].appendChild(text[i]);

}

//모든 작업 선택

함수 allSelect(){

var box = document.getElementsByName('selectbox');

for(var i= 0;i<box.length;i++){

상자[i].checked = true;

}

//모든 선택 취소

함수 취소선택(){

var box = document.getElementsByName('selectbox');

for(var i = 0;i<box.length;i++){

if(box[i].checked == true){

상자[i].checked =false;

}

//이벤트 등록 함수

함수 catchEvent(eventobj,event,eventHandler){

if(eventobj.addEventListener){

eventobj.addEventListener(event,eventHandler,false);

}else if(eventobj.attachEvent){

이벤트 = 'on'+이벤트;

eventobj.attachEvent(event,eventHandler);

}

//catchEvent(add,'click',addRow);

</script>

</head>

<본문>

</table>

</body>

</html></span>