HTML DOM 열 범위 속성

<시간/>

HTML DOM 열 범위 속성은 HTML의 요소 내부에 있는 colspan 속성과 연결됩니다. colSpan 속성을 사용하여 테이블의 colspan 속성을 설정하거나 반환할 수 있습니다. colspan 속성은 번호를 생성하는 데 사용됩니다. 테이블이 확장되어야 하는 열의 수입니다.

구문

다음은 −

의 구문입니다.

tabledataObject.colSpan = number

여기서 number는 테이블이 확장되어야 하는 열의 수를 나타냅니다.

예시

colSpan 속성의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
   border: 1px solid blue;
}
</style>
</head>
<body>
<h2>Monthly Savings</h2>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>
<br>
<button onclick="changeSpan()">CHANGE</button>
<script>
   var x=document.getElementsByClassName("TD1").length;
   function changeSpan() {
      for(var i=0;i<=x;i++){
         document.getElementsByClassName("TD1")[i].colSpan = "1";
      }
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 열 범위 속성

CHANGE 클릭 시 -

HTML DOM 열 범위 속성

위의 예에서 -

두 번째 행에서 시작하는 첫 번째 요소, 즉 1월과 2월의 colspan이 2인 테이블을 가져왔습니다. 이렇게 하면 테이블이 3개의 행과 3개의 열이 있습니다. 다른 테이블과 다르게 보이도록 스타일이 적용된 테이블 -

table, th, td {
   border: 1px solid blue;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>

그런 다음 사용자가 클릭할 때 changeSpan() 메서드를 실행하는 CHANGE 버튼을 만들었습니다.

<button onclick="changeSpan()">CHANGE</button>

changeSpan() 메서드는 문서 객체에 대한 getElementsByClassName() 메서드와 인덱싱을 사용하여 두 요소에 모두 액세스하여

요소를 모두 가져옵니다. 그런 다음 두

요소의 colSpan 속성 값을 가져와 2에서 1 -

으로 변경합니다.

var x=document.getElementsByClassName("TD1").length;
function changeSpan() {
   for(var i=0;i<=x;i++){
      document.getElementsByClassName("TD1")[i].colSpan = "1";
   }
}