테이블을 동적으로 조작하려면 DOM에 익숙해야 합니다. 브라우저 호환성을 얻으려면 테이블 작업에 있어서 W3C 표준과 각 브라우저의 특성을 잘 알고 있어야 합니다. Table은 오늘날 데이터 표시를 위한 최고의 선택입니다. DOM에는 Table에 대한 일부 기능과 메서드가 특별히 추가되어 더 간단하고 효율적인 프로그램을 작성하는 데 도움이 됩니다.
참고: 이 기사의 프로그램은 IE7 및 Firefox3에서 테스트되었습니다.
절차 1: 동적으로 테이블 생성
1 통해 입력은 숫자가 아닙니다.");
9 ~ ~ ; 0보다 큰 숫자);
12 > tableNode.setAttribute("class","tableStyle");
18 tableNode.setAttribute("border",1);
19
20 for(var i = 0; i < rowCount; i + +){
21 var newRow = tableNode.insertRow(0);
22 for(var j = 0; j < cellCount; j++){
23 var newCell = newRow.insertCell(0);
24 newCell 🎜>27 document.body.appendChild(tableNode);
28 }
이 함수는 매우 간단합니다. 14행에서는 document.createElement() 메서드를 사용하여 Table 태그를 생성합니다. 대부분의 브라우저가 이 방법을 지원하기 때문에 주의가 필요한 사항이 발생하지 않았습니다. 16-18행에서는 setAttribute() 메서드를 사용하여 새로 생성된 테이블 태그에 속성을 추가합니다. 이러한 코드 행은 IE 및 FF로 구문 분석할 수 있지만 "JavaScript Advanced 프로그래밍" 책에서는 다음을 지적합니다.
IE 이 접근 방식에는 큰 문제가 있습니다. IE를 지원할 계획이라면 가능하면 속성을 사용하는 것이 가장 좋습니다. 마스터가 말하는 것은 항상 의미가 있으므로 메소드 대신 속성을 사용할 수 있습니다. 다행히 FireFox는 속성에 대한 지원도 제공하므로 다음과 같이 프로그램을 수정할 수 있습니다.
1 tableNode.id = "tableNode";
2 tableNode.className = "tableStyle";
3 tableNode.border = "1"; 주의할 점은 테이블의 클래스를 설정할 때 className을 사용해야 한다는 것입니다.
21번째 줄에 사용된 insertRow()와 23번째 줄에 사용된 insertCell()은 모두 DOM에서 Table용으로 제공하는 특수 API이며 해당 메서드는 deleteRow()와 deleteCell()입니다. : IE는 두 메소드 모두에 대해 기본 매개변수 -1을 제공하지만 FireFox는 이에 대한 매개변수를 제공하지 않으므로 매개변수가 없으면 IE에서는 정상적으로 실행될 수 있지만 FireFox에서는 실행되지 않습니다. 따라서 우리는 항상 이 두 가지 메소드에 매개변수를 제공하도록 주의해야 합니다. 일반인의 관점에서 이 두 함수의 매개변수의 의미는 다음과 같이 설명할 수 있습니다.
0: 기존 행 위에 새 행을 추가합니다.------항상 최신 행 인덱스(rowIndex)를 설정합니다. to 0
-1: 새로 생성된 행을 기존 행 아래에 배치 -------행 인덱스는 0부터 시작하여 증가합니다.
이 매개변수를 수동으로 설정할 수도 있지만 설정된 매개변수가 현재 테이블의 행 인덱스 +1보다 크면 프로그램에서 오류를 보고합니다. insertCell()도 비슷한 의미를 갖고 있으므로 반복할 필요가 없습니다!
절차 2: 지정된 줄 앞뒤에 새 줄 삽입
1 /**
2 * 지정된 행 인덱스 앞이나 뒤에 새 행 추가
3 * @param {Object} position은 삽입된 위치 앞과 뒤의 위치를 식별합니다.
4 * @param {Object} indexOfRow 행 인덱스
5*/
6 function insertNewRow(position,indexOfRow) {
7 var tableNode = document.getElementById("tableNode");
8 if(table Node == null ; (indexOfRow) > 0) {
13 //행 인덱스로
14번째 행을 찾습니다. if(Number(indexOfRow - 1) <= tableNode.rows.length){
15 var tableRow = tableNode.row s[indexOfRow-1 ];
16 } else {
17 var tableRow = tableNode.rows[tableNode.rows.length-1];
18 }
19 // cloneNode를 통해 행을 복사하여 새 행 가져오기
20 var newRow = tableRow.cloneNode(true);
21 //지정된 행 앞에 새 행 삽입
22 if(position == 1){
23 tableRow.parentNode.insertBefore(newRow, tableRow);
24 | 0"보다 큼);
30 return;
31 }
32 } www.devdao.com
프로그램 1 5개 행에 사용되는 행 테이블의 모든 행과 해당 셀을 포함하는 배열을 반환한다는 의미입니다. 테이블의 셀. 모든 행을 포함하는 배열이므로 자연스럽게 배열 인덱스를 사용하여 원하는 값을 얻을 수 있습니다.
20행에 사용된 cloneNode() 메서드는 제가 가장 좋아하는 DOM 메서드 중 하나입니다. HTML 요소는 깊은 곳(매개변수는 true) 또는 얕은 곳(매개변수는 false)으로 복사됩니다. 소위 깊은 복사는 원본 요소와 동일한 특수 이름을 가진 현재 요소의 복사본을 반환하는 것을 의미합니다. 기존 요소와 동일한 새 요소를 생성해야 하는 경우(예: 여러 파일 업로드), 이 방법을 사용하면 많은 코드를 절약할 수 있습니다. 소위 얕은 복사란 요소의 특정 이름을 복사하지 않고 요소의 뼈대만 복사하는 것을 의미하며, 그 의미는 표현하기 어렵다. 그 효과를 관찰해 보세요.
23행에 사용된 insertBefore() 메소드도 매우 간단합니다. 지정된 요소를 현재 요소 앞에 삽입하는 것입니다. 인터넷에서 왜 W3C에 insertAfter()가 없는지 말하는 사람들이 종종 있습니다. 다른 방식으로 생각해 보세요. 지정된 요소가 현재 요소의 다음 요소 앞에 삽입되면 insertAfter() 메서드가 구현됩니다. " tableNode");
8
9 if(isNaN(deleteRowIndex) ||parseInt(deleteRowIndex) < 1 ||parseInt(deleteRowIndex)> Number( rowCount)){10 warning("0보다 크고 "+Number(rowCount)+"보다 작은 숫자를 입력하십시오."")
11 return;
12 }
13 tableNode. deleteRow(Number(deleteRowIndex - 1));
14 } 하하, 이 작은 프로그램에 대해서는 별로 할 말이 없습니다. 사용된 기본 메소드는 deleteRow()이지만 주의하세요. 전달된 매개변수는 테이블의 행 수, 그렇지 않으면 오류가 보고됩니다!
프로그램 4: 지정된 셀 삭제
1 /**
2 * 지정된 행을 삭제합니다
3 * @param {Object} deleteRowIndex 삭제할 행의 인덱스
4*/
6 function deleteTheCell(indexOfRow,indexOfCell){
7 var tableNode = document. ("tableNode");
9 rowNode.deleteCell(Number(indexOfCell-1));
10 } 사용 제공 사용 행 인덱스와 열 인덱스를 검색하여 삭제하려는 셀을 찾은 다음 deleteCell() 메서드를 호출한 다음 지정된 열에 대한 코드를 삭제합니다. 이와 유사하게 테이블의 각 행을 반복하여 찾는 것에 지나지 않습니다. 지정된 열을 삭제한 다음 삭제합니다.
위 내용은 DOM을 사용하여 브라우저 호환 테이블 작업을 작성하는 JavaScript 연구 노트(2)입니다. 더 많은 관련 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
