<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type=text/javascript src="http://www.prototypejs.org/javascripts/prototype.js"></script>
<script>
//전체 행렬 개수 지정
var br = 3;
var bc = 3;
function crtable(){
var attr = {border:0,ceppspacing:2,id:'dtable',unselectable:'on'};
var style = {cursor:'pointer',background:'#c0c0c0'};
var tbl = createTag('table',attr,style);
var tbody = document.createElement('tbody');
for(i=0;i<br;i++)
{
var attr = {id:'tr'+i,height:10};
var tr = createTag('tr',attr);
for(j=0;j<bc;j++)
{
var tdattr = {id:'td'+i+j, onmouseover:'addCell(this)'};
var tdstyle = {width:'20px',height:'20px',background:'#fff'};
var td = createTag('td',tdattr, tdstyle);
td.innerHTML = ' '+j;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
tbl.appendChild(tbody);
$$('body')[0].appendChild(tbl);
}
function addCell(cell)
{
/* r,c - 현재 마우스가 올라와 있는 셀의 위치값 r : Row, c - Cell */
var r = cell.parentNode.rowIndex + 1;
var c = cell.cellIndex + 1;
/* ar, ac - 전체 테이블의 행,열의 값 */
ar = cell.parentNode.parentNode.rows.length;
ac = cell.parentNode.cells.length;
/* 열 추가 */
if(c >= ac){
var tr = cell.parentNode.parentNode.firstChild;//insertCell(c);
for (i = 0; i < ar; i++) {
var nc = tr.insertCell(ac);
nc.innerHTML = ' ' + c;
nc.style.background = '#fff';
nc.style.width = '20px';
nc.style.height = '20px';
nc.setAttribute('onmouseover', 'addCell(this)');
tr = tr.nextSibling;
}
}
/* 행 추가 */
if(r >= ar)
{
cell.parentNode.parentNode.insertRow(r);
var tr = cell.parentNode.nextSibling;
for(i=0;i<ac;i++)
{
var nc = tr.insertCell(i);
nc.innerHTML = ' ' + r;
nc.style.background = '#fff';
nc.style.width = '20px';
nc.style.height = '20px';
nc.setAttribute('onmouseover', 'addCell(this)');
}
}
/* 열 삭제 */
if(ac > bc && (ac - c >= 2))
{
var tr = cell.parentNode.parentNode.firstChild;
for (i = 0; i < ar; i++) {
for (j = ac; j > c+1; j--) {
tr.deleteCell(j-1);
}
tr = tr.nextSibling;
}
}
/* 행 삭제 */
if(ar > br && (ar - r >= 2))
{
var tbody = cell.parentNode.parentNode;
for(i=ar;i>r+1;i--)
{
tbody.deleteRow(i-1);
}
}
}
function createTag(tag, attr, style)
{
var ctag = document.createElement(tag);
for(var prop in attr){
ctag.setAttribute(prop,attr[prop]);
}
Element.setStyle(ctag,style);
return ctag;
}
function toggleTable()
{
if($('dtable'))
{
Element.remove('dtable');
} else {
crtable();
}
}
</script>
</head>
<body>
<button onclick="toggleTable();" >table</button>
</body>
</html>
'프로그래밍 > javascript' 카테고리의 다른 글
| [javascript - prototype] Event.observe의 사용법 (0) | 2009.10.27 |
|---|---|
| onunload() (0) | 2009.02.16 |
| CSS inline & block (0) | 2009.02.13 |
| javascript 스트링 prototype (0) | 2009.02.03 |
| 셀렉트박스 -> 레이어 변환 스크립트 HTC 버전 [출처] 셀렉트박스 -> 레이어 변환 스크립트 HTC 버전 (0) | 2009.01.29 |
