옵션에 사용하기 위해 만들어본 코드입니다.
테스트 해본 코드이므로 별 이상은 없을것 같습니다.
동적테이블 정보가 필요하신 분들은 참고하세요.
IE, FF, 크롬에서 실행되는 것을 확이하였습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<form method=post action="a2_post.php">
<input type=button value="행추가" onclick="add_tr();">
<input type=button value="열추가" onclick="add_td();">
<input type=button value="행삭제" onclick="del_row();">
<input type=button value="열삭제" onclick="del_col();">
<table id='tbl' border=1>
<thead id='thd'>
<tr>
<td>
<input type=text name=opty size=4>
<input type=text name=optx size=4>
</td>
<td>
<input type=text name='optx_subj[]' size=10>
</td>
</tr>
</thead>
<tbody id='tbd'>
<tr>
<td><input type=text name='opty_subj[]' size=10></td>
<td><input type=text name='opt[][]' size=10></td>
</tr>
</tbody>
</table>
<input type=submit>
</form>
<span id=msg></span>
<script>
var tbl = document.getElementById('tbl');
var thd = document.getElementById('thd');
var tbd = document.getElementById('tbd');
var tr = null;
var td = null;
var x=1, y=1;
function add_tr()
{
// 행 제목 추가
tr = document.createElement('tr');
tbd.appendChild(tr);
td = document.createElement('td');
tr.appendChild(td);
add_input('opty_subj[]');
// 열의 갯수에 따라 추가된 행의 열 추가
var thd_td = thd.getElementsByTagName('td');
for (i=0; i<thd_td.length-1; i++)
{
td = document.createElement('td');
tr.appendChild(td);
add_input('opt[][]');
}
}
function add_td()
{
// 열 제목 추가
var thd_tr = thd.getElementsByTagName('tr');
td = document.createElement('td');
thd_tr[0].appendChild(td);
add_input('optx_subj[]');
var tbd_tr = tbd.getElementsByTagName('tr');
for (i=0; i<tbd_tr.length; i++) {
//var td_tag = tr_tag[i].getElementsByTagName("td");
td = document.createElement('td');
tbd_tr[i].appendChild(td);
add_input('opt[][]');
}
}
function add_input(name)
{
var inp = document.createElement('input');
inp.setAttribute('type', 'text');
inp.setAttribute('size', '10');
inp.setAttribute('name', name);
td.appendChild(inp);
}
function del_row()
{
var tbd_tr = tbd.getElementsByTagName('tr');
//document.getElementById('msg').innerHTML = tbd_tr.length;
if (tbd_tr.length > 1)
tbd.deleteRow(tbd_tr.length-1);
}
function del_col()
{
var thd_tr = thd.getElementsByTagName('tr');
var thd_td = thd.getElementsByTagName('td');
//document.getElementById('msg').innerHTML = thd_td.length;
if (thd_td.length > 2) {
thd_tr[0].deleteCell(thd_td.length-1);
var tbd_tr = tbd.getElementsByTagName('tr');
for (i=0; i<tbd_tr.length; i++) {
var tr_td = tbd_tr[i].getElementsByTagName('td');
tbd_tr[i].deleteCell(tr_td.length-1);
}
}
}
</script>
</BODY>
</HTML>
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3130 | 14년 전 | 1466 | ||
| 3129 | 14년 전 | 1162 | ||
| 3128 | 14년 전 | 1036 | ||
| 3127 |
조이온라인
|
14년 전 | 997 | |
| 3126 |
마케팅메지션
|
14년 전 | 1369 | |
| 3125 | 14년 전 | 971 | ||
| 3124 | 14년 전 | 1351 | ||
| 3123 |
마케팅메지션
|
14년 전 | 1063 | |
| 3122 | 14년 전 | 910 | ||
| 3121 | 14년 전 | 1159 | ||
| 3120 | 14년 전 | 1279 | ||
| 3119 | 14년 전 | 1014 | ||
| 3118 | 14년 전 | 1523 | ||
| 3117 | 14년 전 | 1232 | ||
| 3116 | 14년 전 | 1562 | ||
| 3115 |
windday
|
14년 전 | 1251 | |
| 3114 | 14년 전 | 1168 | ||
| 3113 | 14년 전 | 1247 | ||
| 3112 | 14년 전 | 3714 | ||
| 3111 | 14년 전 | 1055 | ||
| 3110 | 14년 전 | 2244 | ||
| 3109 | 14년 전 | 3704 | ||
| 3108 | 14년 전 | 1656 | ||
| 3107 | 14년 전 | 1594 | ||
| 3106 | 14년 전 | 2288 | ||
| 3105 | 14년 전 | 1468 | ||
| 3104 | 14년 전 | 1475 | ||
| 3103 | 14년 전 | 1697 | ||
| 3102 | 14년 전 | 1184 | ||
| 3101 | 14년 전 | 2025 | ||
| 3100 | 14년 전 | 1543 | ||
| 3099 | 14년 전 | 1161 | ||
| 3098 | 14년 전 | 1304 | ||
| 3097 | 14년 전 | 1083 | ||
| 3096 | 14년 전 | 1545 | ||
| 3095 | 14년 전 | 931 | ||
| 3094 | 14년 전 | 2143 | ||
| 3093 | 14년 전 | 1141 | ||
| 3092 | 14년 전 | 979 | ||
| 3091 | 14년 전 | 1440 | ||
| 3090 | 14년 전 | 1431 | ||
| 3089 | 14년 전 | 1373 | ||
| 3088 | 14년 전 | 1525 | ||
| 3087 | 14년 전 | 1192 | ||
| 3086 | 14년 전 | 1135 | ||
| 3085 | 14년 전 | 1757 | ||
| 3084 | 14년 전 | 1288 | ||
| 3083 | 14년 전 | 933 | ||
| 3082 |
|
14년 전 | 1113 | |
| 3081 | 14년 전 | 3185 | ||
| 3080 |
|
14년 전 | 1244 | |
| 3079 | 14년 전 | 947 | ||
| 3078 |
마케팅메지션
|
14년 전 | 1025 | |
| 3077 | 14년 전 | 822 | ||
| 3076 | 14년 전 | 887 | ||
| 3075 | 14년 전 | 1372 | ||
| 3074 | 14년 전 | 1071 | ||
| 3073 | 14년 전 | 916 | ||
| 3072 | 14년 전 | 1168 | ||
| 3071 | 14년 전 | 760 | ||
| 3070 | 14년 전 | 937 | ||
| 3069 | 14년 전 | 1111 | ||
| 3068 | 14년 전 | 973 | ||
| 3067 | 14년 전 | 885 | ||
| 3066 | 14년 전 | 947 | ||
| 3065 | 14년 전 | 1113 | ||
| 3064 |
하모니칼수
|
14년 전 | 1130 | |
| 3063 |
마케팅메지션
|
14년 전 | 1305 | |
| 3062 | 14년 전 | 1134 | ||
| 3061 | 14년 전 | 676 | ||
| 3060 |
|
14년 전 | 811 | |
| 3059 | 14년 전 | 1157 | ||
| 3058 | 14년 전 | 1236 | ||
| 3057 | 14년 전 | 669 | ||
| 3056 | 14년 전 | 2051 | ||
| 3055 | 14년 전 | 1479 | ||
| 3054 | 14년 전 | 1050 | ||
| 3053 | 14년 전 | 1010 | ||
| 3052 |
|
14년 전 | 1167 | |
| 3051 | 14년 전 | 1915 | ||
| 3050 |
떠돌이이병
|
14년 전 | 1179 | |
| 3049 | 14년 전 | 1117 | ||
| 3048 | 14년 전 | 1155 | ||
| 3047 | 14년 전 | 1078 | ||
| 3046 | 14년 전 | 1131 | ||
| 3045 |
마케팅메지션
|
14년 전 | 873 | |
| 3044 | 14년 전 | 1460 | ||
| 3043 | 14년 전 | 1007 | ||
| 3042 | 14년 전 | 858 | ||
| 3041 | 14년 전 | 2826 | ||
| 3040 | 14년 전 | 618 | ||
| 3039 | 14년 전 | 1070 | ||
| 3038 | 14년 전 | 1046 | ||
| 3037 | 14년 전 | 1014 | ||
| 3036 | 14년 전 | 863 | ||
| 3035 | 14년 전 | 1192 | ||
| 3034 |
마케팅메지션
|
14년 전 | 1240 | |
| 3033 | 14년 전 | 889 | ||
| 3032 | 14년 전 | 1296 | ||
| 3031 |
마케팅메지션
|
14년 전 | 922 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기