웹을 하다보면 테이블에 동적으로 행이나 열을 삽입해야 하는 경우가 있다.
그때 사용할수 있는 유용한 팁이다.
위에서 본대로 innerText와 innerHTML을 적절히 이용하면 text와 Html을 적절히 삽입할수 있다.
물론 inner가 있단 이야기는 outerText, outerHTML도 있다는 말이다.
이건 다음에.. ㅋㅋㅋ
그때 사용할수 있는 유용한 팁이다.
[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%"> </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도 있다는 말이다.
이건 다음에.. ㅋㅋㅋ