<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>제목 없음</title>
<meta name="generator" content="Namo WebEditor v5.0">
</head>
<script language="JavaScript">
var table_count = new Array()
var count = 0;
var cnt = 0;
var country_name="";
var city="";
table_count[0] = 0;
function select_chang(country,selt,index)
{
var selt = "document.select_form.formselect" + selt;
var frameobj = eval(selt);
document.select_form.reset(); // select 문의 선택을 reset 한다
frameobj.options[index].selected = true; // 선택되건만 보여진다.
country_name = country;
city = frameobj.options[index].value;
addRow('table_list');
}
function addRow(TableID) // 테이블 동적 생성
{
count++;
cnt++;
table_count[cnt] = count;
var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR");
var td1 = document.createElement("TD");
td1body = "<p align='center'> <font size='2'>"+ country_name +"</font></p>";
td1.insertAdjacentHTML('beforeEnd', td1body );
var td2 = document.createElement("TD");
td2body = "<p align='center'><font size='2'>"+ city + "</font></p>";
td2.insertAdjacentHTML('beforeEnd', td2body);
var td3 = document.createElement("TD");
td6body = "<p align='center'><input type='button' value='삭제' style='border-width:1px; border-style:solid;' onclick=delRow('" + TableID + "'," + table_count[cnt] +")></p>";
td3.insertAdjacentHTML('beforeEnd', td6body);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
tbody.appendChild(row);
}
function delRow(TableID,num) // 테이블의 특정 위치를 삭제
{
var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
for ( var i = 1; i < table_count.length ; i++ )
{
if ( table_count[i] == num )
{ tbody.deleteRow(i); // 테이블 삭제
table_count[i] = 0;
}
}
for ( var i = 1; i < table_count.length ; i++ ) // 위치를 지정하여 이동한다.
{
if ( table_count[i] == 0)
{ cnt = tbody.rows.length-1;
for ( j = i ; j < table_count.length ; j++)
table_count[j] = table_count[j+1];
}
}
}
function cancel(TableID) // 테이블 전체 삭제
{
var tbody = document.getElementById(TableID).getElementsByTagName("TBODY")[0];
var del_cnt = tbody.rows.length;
for ( var i = 1; i < del_cnt; i++ )
{
tbody.deleteRow(1); // 테이블 삭제
}
cnt = 0; // 테이블 관련 번호를 초기화
}
</script>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<form name=select_form>
<table border="0" cellpadding="0" cellspacing="0" width="224">
<tr>
<td width="112">
<p><font size="2"><b>한국</b></font></p>
</td>
<td width="112">
<p><font size="2"><b>중국</b></font></p>
</td>
</tr>
<tr>
<td width="112" height="72" valign="top">
<p><select name="formselect0" size="3" onchange="select_chang('한국',0,selectedIndex)">
<option value="서울">서울</option>
<option value="인천">인천</option>
<option value="대전">대전</option>
<option value="광주">광주</option>
<option value="대구">대구</option>
<option value="부산">부산</option></select>
<br><br>
<input type=button value="전체삭제" style='border-width:1px; border-style:solid;' onclick=cancel("table_list") >
</p>
</td>
<td width="112" height="72" valign="top">
<p><select name="formselect1" size="3" onchange="select_chang('중국',1,selectedIndex)">
<option value="베이징">베이징</option>
<option value="텐진">텐진</option>
<option value="상하이">상하이</option>
<option value="충칭">충칭</option>
<option value="하얼빈">하얼빈</option></select>
</p>
</td>
</tr>
</table>
<br>
<table id="table_list" border="0" cellpadding="0" cellspacing="0" width="224">
<tbody>
<tr>
<td width="80" height="30" bgcolor="#CCCCCC">
<p align="center"><font size="2">국가</font></p>
</td>
<td width="100" height="30" bgcolor="#CCCCCC">
<p align="center"><font size="2">도시</font></p>
</td>
<td width="44" height="30" bgcolor="#CCCCCC">
<p align="center"><font size="2">비고</font></p>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
댓글 없음:
댓글 쓰기