insertRow() 메서드
정의 및 사용법
insertRow() 메소드는 테이블의 지정된 위치에 새 행을 삽입하는 데 사용됩니다.
문법
tableObject.insertRow(색인)
반환 값
새로 삽입된 행을 나타내는 TableRow를 반환합니다.
설명하다
이 메소드는 새로운 <tr> 태그를 나타내는 새로운 TableRow 객체를 생성하고 이를 테이블의 지정된 위치에 삽입합니다.
새 행은 인덱스의 행 앞에 삽입됩니다. index가 테이블의 행 수와 같으면 새 행이 테이블 끝에 추가됩니다.
테이블이 비어 있으면 새 행이 새 <tbody> 섹션에 삽입되고 이 섹션 자체가 테이블에 삽입됩니다.
던지다
매개변수 인덱스가 0보다 작거나 테이블의 행 수보다 크거나 같은 경우 이 메소드는 INDEX_SIZE_ERR 코드와 함께 DOMException 예외를 발생시킵니다.
예
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<스크립트 유형="텍스트/자바스크립트">
함수 insRow()
{
document.getElementById('myTable').insertRow(0)
}
</script>
</head>
<본문>
<테이블 id="myTable">
<tr>
<td>Row1 셀1</td>
<td>1행 셀2</td>
</tr>
<tr>
<td>Row2 셀1</td>
<td>Row2 셀2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()"
value="새 행 삽입">
</body>
</html>
삭제셀()
정의 및 사용법
deleteCell() 메소드는 테이블 행에서 셀(<td> 요소)을 삭제하는 데 사용됩니다.
문법
tablerowObject.deleteCell(색인)
설명하다
매개변수 인덱스는 삭제할 테이블 요소의 행에서의 위치입니다.
이 메소드는 테이블 행의 지정된 위치에 있는 테이블 요소를 삭제합니다.
던지다
매개변수 인덱스가 0보다 작거나 행의 테이블 요소 수보다 크거나 같은 경우 이 메소드는 INDEX_SIZE_ERR 코드와 함께 DOMException 예외를 발생시킵니다.
예
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<스크립트 유형="텍스트/자바스크립트">
함수delRow()
{
document.getElementById('myTable').deleteRow(0)
}
</script>
</head>
<본문>
<테이블 id="myTable">
<tr>
<td>Row1 셀1</td>
<td>1행 셀2</td>
</tr>
<tr>
<td>Row2 셀1</td>
<td>Row2 셀2</td>
</tr>
</table>
<br />
<input type="button" onclick="delRow()"
value="첫 번째 행 삭제">
</body>
</html>
삽입셀()
정의 및 사용법
insertCell() 메소드는 HTML 테이블 행의 지정된 위치에 빈 <td> 요소를 삽입하는 데 사용됩니다.
문법
tablerowObject.insertCell(색인)
반환 값
새로 생성 및 삽입된 <td> 요소를 나타내는 TableCell 개체입니다.
설명하다
이 메소드는 새로운 <td> 요소를 생성하고 이를 행의 지정된 위치에 삽입합니다. 새 셀은 현재 인덱스에 지정된 위치에 있는 셀 앞에 삽입됩니다. index가 행의 셀 수와 같으면 새 셀이 행 끝에 추가됩니다.
이 방법은 <td> 데이터 테이블 요소만 삽입할 수 있다는 점에 유의하세요. 행에 헤더 요소를 추가해야 하는 경우 Document.createElement() 메서드와 Node.insertBefore() 메서드(또는 관련 메서드)를 사용하여 <th> 요소를 만들고 삽입해야 합니다.
던지다
매개변수 인덱스가 0보다 작거나 행의 테이블 요소 수보다 크거나 같은 경우 이 메소드는 INDEX_SIZE_ERR 코드와 함께 DOMException 예외를 발생시킵니다.
예
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<스크립트 유형="텍스트/자바스크립트">
함수 insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="존"
}
</script>
</head>
<본문>
<테이블>
<tr id="tr1">
<th>이름</th>
<th>성</th>
</tr>
<tr id="tr2">
<td>피터</td>
<td>그리핀</td>
</tr>
</table>
<br />
<input type="button" onclick="insCell()" value="셀 삽입">
</body>
</html>
삭제셀()
정의 및 사용법
deleteCell() 메소드는 테이블 행에서 셀(<td> 요소)을 삭제하는 데 사용됩니다.
문법
tablerowObject.deleteCell(색인)
설명하다
매개변수 인덱스는 삭제할 테이블 요소의 행에서의 위치입니다.
이 메소드는 테이블 행의 지정된 위치에 있는 테이블 요소를 삭제합니다.
던지다
매개변수 인덱스가 0보다 작거나 행의 테이블 요소 수보다 크거나 같은 경우 이 메소드는 INDEX_SIZE_ERR 코드와 함께 DOMException 예외를 발생시킵니다.
예
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<스크립트 유형="텍스트/자바스크립트">
함수delCell()
{
document.getElementById('tr2').deleteCell(0)
}
</script>
</head>
<본문>
<테이블>
<tr id="tr1">
<th>이름</th>
<th>성</th>
</tr>
<tr id="tr2">
<td>피터</td>
<td>그리핀</td>
</tr>
</table>
<br />
<input type="button" onclick="delCell()" value="셀 삭제">
</body>
</html>
프로젝트의 응용 프로그램:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
vartr인덱스 = 0;
//동적으로 행 추가
함수appendConvert(){
//var sel = document.getElementById("selectConvertName");
var sel = document.getElementsByName("selectConvertName")[0];
var 클래스명;
if(null!=sel){
for(var i = 0; i < sel.options.length; i++){
if(sel.options[i].선택됨)
className=sel.options[i].value;
}
}
//데이터는 ajax, json 형식에서 가져옵니다.
변환.getConvertBean2Json(클래스이름,
함수(결과) {
var obj = eval('('+result+')');
var table = document.getElementById("convertTable");
var newRow = table.insertRow(trIndex+1);
newRow.insertCell(0).innerHTML = obj.name+"<input type='button' value='삭제' onclick='deleteRow(this)'>";
newRow.insertCell(1).innerHTML = "<input type='text' name='convertList["+trIndex+"].id'><input type='hidden' name='convertList["+trIndex+"].name ' value='"+obj.name+"'>";
if(null!=obj.paramList){
var paramStr = "";
for(var i = 0; i < obj.paramList.length; i++){
paramStr = paramStr+
"매개변수 이름:"+obj.paramList[i].name+
";매개변수 유형:"+obj.paramList[i].type+
"; 매개변수 값: <input name='convertList["+trIndex+"].paramList["+i+"].value' type='text'><br>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].name' value='"+obj.paramList[i].name+"'>"+
"<input type='hidden' name='convertList["+trIndex+"].paramList["+i+"].type' value='"+obj.paramList[i].type+"'>";
}
newRow.insertCell(2).innerHTML = paramStr;
}
tr인덱스++;
});
}
//행 삭제
deleteRow(r)에서{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('convertTable').deleteRow(i);
tr인덱스--;
}
</script>