<html>
<head>
<title>테이블 줄추가 열추가</title>
<script>
rows=1;
cells=1;
//행추가 할 때 쓰임
function rowinsert(){
html=" ";
row=test.insertRow();
//j는 td 수만큼 돌림
for(var j=1;j<=cells;j++){
cell=row.insertCell();//줄을 삽입하고 한 줄당 td수만큼 만듬
cell.bgColor="#e1e1e1";
cell.innerHTML=html;
row.id="row"+rows;//각 줄에 아이디를 할당 아이디를 할당하는 이유는 td생성과 삭제하기 위함
rowid=row.id;//아이디를 할당하는 변수값 처리
}
rows++;//한줄을 늘리면 자동으로 숫자 증가
}
function cellinsert(){
html=" ";
for(var i=1;i<rows;i++){//줄 수만큼 루프문을 돌림
var rowid=eval("row"+i);//각 줄에 아이디를 eval로 이용하여 rowid 값에 넣음
cell=rowid.insertCell();
cell.innerHTML=html;
cell.bgColor="#e1e1e1";
}
cells++;
}
function rowdelete(){
html=" ";
test.deleteRow();
rows--;
}
function celldelete(){
html=" ";
for(var i=parseInt(rows-1);i>=1;i--){
var rowid=eval("row"+i);
rowid.deleteCell();
}
cells--;
}
</script>
</head>
<body>
<form name="form">
<input type="button" value="행추가" onclick="rowinsert()">
<input type="button" value="열추가" onclick="cellinsert()">
<input type="button" value="행삭제" onclick="rowdelete()">
<input type="button" value="열삭제" onclick="celldelete()">
<table id="test" border="1">
</table>
</form>
</body>
</html>
댓글
댓글 쓰기