웹을 하다보면 테이블에 동적으로 행이나 열을 삽입해야 하는 경우가 있다.
그때 사용할수 있는 유용한 팁이다.

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>AnyFive</title> <script language="JavaScript"> <!-- var BasicStr = "" BasicStr = "<input type=button value=신규컬럼>"; function insertCol(tableID) { var tmpTbl = document.all[tableID] var tmpRow = tmpTbl.insertRow(tmpTbl.rows.length); for (var i=1;i<=tmpTbl.rows[0].cells.length;i++) { var tmpCell = tmpRow.insertCell(i - 1); if(i==1) { str = tmpTbl.rows.length-1 } else { str = BasicStr; } tmpCell.innerHTML = str; } } function insertRow(tableID) { var tmpTbl = document.all[tableID] var str = ""; for (var i=1;i<=tmpTbl.rows.length;i++) { var tmpRow = tmpTbl.rows[i-1].insertCell(tmpTbl.rows[i-1].cells.length); if(i==1) { str = tmpTbl.rows[i-1].cells.length-1 } else{ str = BasicStr; } tmpRow.innerText = str; } } //--> </script> </head> <body> <table style="WIDTH: 100%; HEIGHT: 100%; TEXT-ALIGN: left" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="left" valign ="top"> <table style="WIDTH: 40%; TEXT-ALIGN: center" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="*"> <input type="button" value="행삽입" onclick="javascript:insertCol('new_form')"> <input type="button" value="열삽입" onclick="javascript:insertRow('new_form')"> </td> </tr> </table><br/><br/> <table id="new_form" style="WIDTH: 100%; TEXT-ALIGN: center" border="1" cellpadding="5" cellspacing="0"> <tr> <td width="10%"> &nbsp; </td> <td> 1 </td> </tr> <tr> <td width="10%"> 1 </td> <td>기존컬럼</td> </tr> </table> </td> </tr> <% end if %> </table> </body> </html>[/CODE]


위에서 본대로 innerText와 innerHTML을 적절히 이용하면 text와 Html을 적절히 삽입할수 있다.

물론 inner가 있단 이야기는 outerText, outerHTML도 있다는 말이다.

이건 다음에.. ㅋㅋㅋ

+ Recent posts