분석해 원하시는 기능을 사용하시길 바랍니다.
<script>
// 클릭된 셀을 찾아서 반환합니다.
// 인덱스로 찾지 않아도 되므로 소스가 복잡해지지 않습니다.
function getObj() {
var obj = event.srcElement
while (obj.tagName != 'TD') obj = obj.parentElement
return obj
}
// 클릭된 셀의 오른쪽에 로우 수만큼 셀을 넣습니다.
function inCol() {
var obj = getObj()
var r = tbl.rows
for (var i = 0; i < r.length; i++) {
var c = r(i).insertCell(obj.cellIndex + 1)
if (i == 0)
c.innerHTML = '<input type="button" onclick="dlCol()" value="-">'
else
c.innerText = (new Date().valueOf()).toString().substr(10)
}
}
// 클릭된 셀의 아래쪽에 로우를 추가하고 셀 수만큼 넣습니다.
function inRow() {
var idx = getObj().parentElement.rowIndex + 1
var r = tbl.insertRow(idx)
for (var i = 0; i < tbl.rows(0).cells.length; i++) {
var c = tbl.rows(idx).insertCell(i)
if (i == 0)
c.innerHTML = '<input type="button" onclick="dlRow()" value="-">'
else
c.innerText = (new Date().valueOf()).toString().substr(10)
}
}
// 클릭된 셀이 위치한 로우의 셀들을 삭제합니다.
function dlRow() {
var idx = getObj().parentElement.rowIndex
tbl.deleteRow(idx)
}
// 클릭된 셀이 위치한 셀들을 삭제합니다.
function dlCol() {
var idx = getObj().cellIndex
for (var i = 0; i < tbl.rows.length; i++) {
tbl.rows(i).deleteCell(idx)
}
}
</script>
<table border="1" id="tbl">
<tr>
<td> </td>
<td><input type="button" onclick="inCol()" value="+"></td>
<td><input type="button" onclick="inCol()" value="+"></td>
</tr>
<tr>
<td><input type="button" onclick="inRow()" value="+"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="button" onclick="inRow()" value="+"></td>
<td> </td>
<td> </td>
</tr>
</table>
이미 존재하는 테이블에 로우(TR)를 추가하시려면 insertRow를 사용합니다.
1. 테이블에 id 속성을 지정하고(여기서는 tableId)
2. 이벤트 발생시 다음과 같이 수행합니다.
var mytable=document.all.tableId;
var myrow=mytable.insertRow();
myrow.bgColor="#3E8861";
var mycell=myrow.insertCell();
mycell.align="center";
mycell.noWrap=true;
mycell.className="action_td";
mycell.innerText="AAA";
※ 답변 추가 >>>>>>>>>>>>
다음과 같이 img element를 생성하는 형태로 하실 수 있고,
또한 mycell.innerHTML을 사용하여 img관련 html코드를 바로 넣어주셔도 됩니다.
<html>
<head>
<script type="text/javascript">
function addRow() {
var mytable=document.all.tableId;
var myrow=mytable.insertRow();
myrow.bgColor="#3E8861";
var mycell=myrow.insertCell();
mycell.align="center";
mycell.noWrap=true;
mycell.className="action_td";
mycell.innerText="AAA";
//이렇게
var img1=document.createElement("img");
img1.src="http://static.naver.com/kin/event/banner_lovekin11.gif";
img1.hspace=1;
mycell.insertAdjacentElement("beforeEnd",img1);
var img2=document.createElement("img");
img2.src="http://static.naver.com/kin/event/banner_lovekin12.gif";
img2.hspace=1;
mycell.insertAdjacentElement("beforeEnd",img2);
var img3=document.createElement("img");
img3.src="http://static.naver.com/kin/event/banner_lovekin13.gif";
img3.hspace=1;
mycell.insertAdjacentElement("beforeEnd",img3);
//혹은이렇게 하시면 됩니다.
mycell.innerHTML="<img src=\"http://static.naver.com/kin/event/banner_lovekin11.gif\" hspace=\"1\">
<img src=\"http://static.naver.com/kin/event/banner_lovekin12.gif\" hspace=\"1\">
<img src=\"http://static.naver.com/kin/event/banner_lovekin13.gif\" hspace=\"1\">";
}
</script>
</head>
<body onload="addRow()">
<table id=tableId>
</table>
</body>
</html>
'IT_Programming > JavaScript' 카테고리의 다른 글
| JavaScript에서 정규식 (0) | 2006.11.04 |
|---|---|
| Scroll to Bottom of a Div (0) | 2006.11.04 |
| [스크랩] 시간포멧함수 ":"제거함수 (0) | 2006.10.16 |
| [스크랩] 텍스트박스에 숫자 및 콤마 입력 가능하게하는 이벤트 핸들러 함수 (0) | 2006.10.16 |
| [스크랩] 텍스트박스에 숫자 및 콜론 입력 가능하게하는 이벤트 핸들러 함수 (0) | 2006.10.16 |