JavaScript를 사용하여 HTML 테이블에서 열을 삭제하는 방법은 무엇입니까?

HTML에서 테이블은 형식화된 방식으로 웹 페이지에 데이터를 표시하는 데 사용됩니다. 테이블에는 데이터를 표시하는 열과 행이 포함되어 있습니다.

때때로 개발자는 테이블 열을 삭제하거나 사용자가 삭제하도록 허용해야 합니다. 예를 들어 이 테이블에는 사용자 데이터가 포함되어 있으며 "연령" 및 "생년월일" 열이 있습니다. 이 경우 "생일" 열에서 나이를 얻을 수 있으므로 "나이" 열을 제거해야 합니다.

개발자는 deleteCell() 메서드를 사용하여 특정 열을 삭제할 수 있습니다. 이번 튜토리얼에서는 인덱스, 클래스 이름, 컬럼 이름을 기준으로 테이블 컬럼을 삭제하는 방법을 알아봅니다. 또한 개발자는 테이블 열이 0부터 시작하는 인덱스라는 점을 기억해야 합니다.

문법

사용자는 다음 구문에 따라 deleteCell() 메서드를 사용하여 테이블의 특정 열을 삭제할 수 있습니다.

으아악

위 구문에서는 각 테이블 행을 반복하고 "인덱스"에서 셀을 제거합니다. 여기서 index는 삭제할 컬럼의 index이다.

예제 1 (인덱스별로 테이블 열 삭제)

아래 예에서는 단어 번호가 포함된 테이블을 만들었습니다. 또한 CSS에 테두리를 제공하여 테이블 스타일을 지정합니다. 사용자가 버튼을 클릭할 때마다 deleteColumn() 함수를 실행합니다.

deleteColumn() 함수에서는 id를 사용하여 테이블에 액세스합니다. 또한 "rows" 속성을 사용하여 테이블의 모든 행을 가져오고 배열의 "length" 속성을 사용하여 총 행 수를 계산합니다.

세 번째 열을 삭제하려면 “index” 변수를 2로 초기화합니다. 그런 다음 for 루프를 사용하여 테이블의 모든 행을 반복합니다. deleteCell() 메서드를 사용하여 각 행의 세 번째 셀을 삭제합니다.

출력에서 사용자는 버튼을 클릭하여 테이블의 세 번째 열을 삭제할 수 있습니다.

으아악

예 2(헤더 텍스트로 표 열 제거)

아래 예에서는 음식 데이터가 포함된 테이블을 만들었습니다. 이 예에서는 헤더 텍스트를 사용하여 테이블 열을 삭제합니다.

deleteColum() 함수에서 테이블 제목에 액세스합니다. 그런 다음 모든 헤더 행에 액세스합니다. 다음으로 헤더 행을 반복하여 내부 HTML로 "Calories"를 포함하는 헤더 인덱스를 찾습니다.

열 인덱스를 찾은 후 첫 번째 예에서 했던 것처럼 for 루프와 tableCell() 메서드를 사용하여 각 행에서 특정 셀을 삭제할 수 있습니다.

출력에서 사용자는 버튼을 클릭하여 "칼로리" 열을 삭제해야 합니다.

으아악

예 3(클래스 이름별로 여러 테이블 열 삭제)

다음 예에서는 클래스 이름을 사용하여 테이블의 여러 열을 삭제하는 방법을 알아봅니다.

여기에서는 먼저 테이블의 모든 행에 액세스한 다음 for 루프를 사용하여 반복합니다. 그런 다음 "추가" 클래스 이름을 포함하는 특정 행의 모든 ​​셀에 액세스합니다. while 루프를 사용하여 모든 셀을 반복하고 "cells[0].parentNode.removeChild(cells[0])"를 사용하여 모든 셀을 하나씩 제거합니다.

위 코드에서 cell[0]이 현재 셀입니다. "parentNode"는 RemoveChild() 메서드가 하위 노드를 제거하는 행을 나타냅니다.

출력에서 사용자는 버튼을 클릭하여 테이블에서 여러 열을 삭제할 수 있습니다.

으아악

JavaScript를 사용하여 테이블에서 열을 삭제하는 방법을 배웠습니다. 처음 2개의 예제에서는 열 인덱스를 매개변수로 전달하여 deleteCeil() 메서드를 사용했습니다. 세 번째 예에서는 RemoveChild() 메서드를 사용하여 특정 셀을 제거합니다.

위 내용은 JavaScript를 사용하여 HTML 테이블에서 열을 삭제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!