테이블에는 몇 개의 행이 있습니다 : var trcnt = table.rows.length; (테이블은 ID입니다)
각 행 당 얼마나 많은 열이 있습니까? for (var i = 0; i <trcnt; i ++)
테이블. rows [i] .cells.length;
자바 스크립트 작동 테이블 :
insertrow (), deleterow (), insertcell (), deletecell () 메소드
Table.inserTrow ()는 IE에서는 괜찮지 만 Firefox에서는 표로 변경해야합니다. InserTrow (-1)
마찬가지로 해당 insertCell ()도 insertCell (-1)으로 변경해야합니다.
insertrow () 메소드
정의 및 사용법
InserTrow () 메소드는 테이블의 지정된 위치에 새 행을 삽입하는 데 사용됩니다.
문법
TableObject.inserTrow (색인)
반환 값
새로 삽입 된 행을 나타냅니다.
설명
이 메소드는 새로운 TableRow 객체를 생성하고 새로운 <TR> 태그를 나타내며 테이블의 지정된 위치에 삽입합니다.
새로운 라인은 인덱스 라인 전에 삽입됩니다. 인덱스가 테이블의 행 수와 같으면 새 행이 테이블 끝에 추가됩니다.
테이블이 비어 있으면 새 행이 새 <tbody> 세그먼트에 삽입되며 테이블 자체가 테이블에 삽입됩니다.
버리세요
매개 변수 인덱스가 테이블의 행 수보다 0보다 크거나 동일하면이 메소드는 Code Index_size_err와 함께 Domexception 예외를 던집니다.
예
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript">
함수 insrow ()
{
document.getElementById ( 'mytable'). InserTrow (0)
}
< /스크립트>
< /head>
<body>
<table id = "mytable">
<tr>
<td> Row1 Cell1 </td>
<td> Row1 Cell2 </td>
< /tr>
<tr>
<td> Row2 Cell1 </td>
<td> Row2 Cell2 </td>
< /tr>
< /테이블>
<br />
<입력 유형 = "버튼"onclick = "insrow ()"
value = "새 행 삽입">
< /body>
< /html>
deletecell ()
정의 및 사용법
deletecell () 메소드는 테이블 행에서 셀 (<td> 요소)을 삭제하는 데 사용됩니다.
문법
taberowoBject.deletecell (색인)
설명
매개 변수 인덱스는 행에서 삭제할 테이블 요소의 위치입니다.
이 메소드는 테이블 행의 지정된 위치에서 테이블 요소를 삭제합니다.
버리세요
매개 변수 인덱스가 행의 테이블 요소보다 0보다 크거나 크지 않은 경우이 메소드는 Code Index_size_err와 함께 Domexception 예외를 던집니다.
예
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript">
함수 delrow ()
{
document.getElementById ( 'mytable'). deleterow (0)
}
< /스크립트>
< /head>
<body>
<table id = "mytable">
<tr>
<td> Row1 Cell1 </td>
<td> Row1 Cell2 </td>
< /tr>
<tr>
<td> Row2 Cell1 </td>
<td> Row2 Cell2 </td>
< /tr>
< /테이블>
<br />
<입력 유형 = "버튼"onclick = "delrow ()"
값 = "첫 번째 행 삭제">
< /body>
< /html>
insertCell ()
정의 및 사용법
insertCell () 메소드는 HTML 테이블에있는 행의 지정된 위치에 빈 <TD> 요소를 삽입하는 데 사용됩니다.
문법
taberowoBject.insertcell (색인)
반환 값
새로 생성되고 삽입 된 <TD> 요소를 나타내는 식탁 인물.
설명
이 메소드는 새로운 <td> 요소를 생성하고 행의 지정된 위치에 삽입합니다. 새로운 셀은 현재 인덱스의 지정된 위치에 위치한 테이블 요소 전에 삽입됩니다. 인덱스가 행의 셀 수와 같으면 새 셀이 행 끝에 추가됩니다.
이 메소드는 <td> 데이터 테이블 요소 만 삽입 할 수 있습니다. 행에 헤더 요소를 추가 해야하는 경우 Document.CreateElement () 메소드 및 Node.InsertBefore () 메소드 (또는 관련 메소드)를 사용하여 <th> 요소를 작성하고 삽입해야합니다.
버리세요
매개 변수 인덱스가 행의 테이블 요소보다 0보다 크거나 크지 않은 경우이 메소드는 Code Index_size_err와 함께 Domexception 예외를 던집니다.
예
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript">
함수 inscell ()
{
var x = document.getElementById ( 'tr2'). InsertCell (0)
x.innerhtml = "John"
}
< /스크립트>
< /head>
<body>
<테이블>
<tr id = "tr1">
<Th> FirstName </th>
<th> 최후의 이름 </th>
< /tr>
<tr id = "tr2">
<td> 피터 </td>
<td> 그리핀 </td>
< /tr>
< /테이블>
<br />
<input type = "button"onclick = "inscell ()"value = "insert cell">
< /body>
< /html>
deletecell ()
정의 및 사용법
deletecell () 메소드는 테이블 행에서 셀 (<td> 요소)을 삭제하는 데 사용됩니다.
문법
taberowoBject.deletecell (색인)
설명
매개 변수 인덱스는 행에서 삭제할 테이블 요소의 위치입니다.
이 메소드는 테이블 행의 지정된 위치에서 테이블 요소를 삭제합니다.
버리세요
매개 변수 인덱스가 행의 테이블 요소보다 0보다 크거나 크지 않은 경우이 메소드는 Code Index_size_err와 함께 Domexception 예외를 던집니다.
예
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript">
함수 delcell ()
{
document.getElementById ( 'tr2'). deletecell (0)
}
< /스크립트>
< /head>
<body>
<테이블>
<tr id = "tr1">
<Th> FirstName </th>
<th> 최후의 이름 </th>
< /tr>
<tr id = "tr2">
<td> 피터 </td>
<td> 그리핀 </td>
< /tr>
< /테이블>
<br />
<input type = "button"onclick = "delcell ()"value = "delete cell">
< /body>
< /html>
프로젝트의 응용 프로그램 :
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var trindex = 0;
// 행을 동적으로 증가시킵니다
unction appendconvert () {
// var sel = document.getElementById ( "SelectConvertName");
var sel = document.getElementsByName ( "SelectConvertName") [0];
var className;
if (null! = sel) {
for (var i = 0; i <sel.options.length; i ++) {
if (sel.options [i] .Selected)
classname = sel.options [i] .Value;
}
}
// 데이터는 ajax, json 양식에서 나옵니다.
convert.getConvertBean2json (classname,
함수 (결과) {
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 = 'delete'onclick = 'deleterow (this)'>";
newrow.insertcell (1) .innerhtml = "<input type = 'text'name = 'convertList ["+trindex+"]. id'> <input type = 'hidden'name = 'convertList ["+trindex+"]. 이름' '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;
}
Trindex ++;
});
}
// 줄을 삭제합니다
deleterow (r) {
var i = r.parentnode.parentNode.RowIndex;
document.getElementById ( 'convertTable'). deleterow (i);
trindex--;
}
</스크립트>